webstorm、phpstorm、idea等使用技巧

合集下载

webstorm整理代码

webstorm整理代码

webstorm整理代码
WebStorm是一款强大的代码编辑器,可以帮助我们高效地整理代码。

以下是一些用中文编写的整理代码的步骤:
1. 格式化代码:在编辑器中按下Ctrl + Alt + L,WebStorm会自动调整代码格式,使其易于阅读、更加规范化。

2. 统一命名规范:对于变量、函数和类等命名,可以制定一些统一的命名规范,如驼峰命名法等,以便于其他开发者更好地理解和维护代码。

3. 删除冗余代码:应尽量避免重复代码的出现。

在整理代码时,可以使用WebStorm的搜索功能,查找并删除无用的或不必要的代码。

4. 合理的注释:代码中的注释可以帮助开发者更好地理解和维护代码。

在编写注释时,应注重语法规范和简洁明了。

5. 整理代码结构:合理的代码结构可以使代码更易于理解和维护。

可以将相关的代码块放在一起,并进行缩进和空格处理,以使代码更为清晰易读。

通过上述整理代码的步骤,可以有效提高代码的质量,减少问题的隐患,从而使开发工作更为高效和优秀。

WebStorm使用文档--转载

WebStorm使用文档--转载

WebStorm使⽤⽂档--转载WebStorm 使⽤⽂档概述号称最好⽤的前端IDE,Win7 和 Mac 上各⽤了⼀段时间,感觉确实不错分享出来。

版本上从8⼀直⽤到10,在设置上9到10有⼀次⽐较⼤的调整,下⾯的设置从10的使⽤中记录整理⽽来。

WebStorm在下⾯简写为WS。

快捷键下⾯介绍的快捷键和上⾯⽪肤和快捷键风格的设置有关,如果你和我设置的不⼀样会有很⼤的不同。

第⼀批给出的快捷键是10个,以后每批不多于5个,因为⼀般⼈的短暂记忆量是3-7个,我记快捷键的⽅式是每天开始编码先看⼀眼快捷键,但是不多看3-5个⾜够了,⼀天的编码中尽量去⽤⼀般两到三天就不⽤刻意去想了基本可以达到肌⾁记忆的层度。

1 - 基本编辑窗⼝的常⽤操作撤销,Undo, Win:Ctrl + Z; Mac:Com + Z恢复,Redo, Win:Ctrl + Shift + Z; Mac:Com + Shift + Z查找,Find, Win:Ctrl + F; Mac:Com + F在某⼀⽂件夹下查找内容,Find in Path, Win:Ctrl + Shift + F; Mac:Ctrl + Shift + F替换,Replace, Win:Ctrl + R; Mac:Com + R,格式化代码,Reformat Code, Win:Ctrl + Alt + L, Mac: Alt + Com + L对当前光标所在⾏或者选中部分做操作向下复制⼀⾏或⼀个代码块,Duplicate Line or Block, Win:Ctrl + D; Mac: Com + D剪切,Cut, Win:Ctrl + X; Mac: Com + X删除,Delete Line, Win:Ctrl + Y; Mac: Com + Y,需要注意的是选中字符所在的⾏会被删掉上下移动⾏,Move Line Up/Down, Win:Alt + Shift + 上/下箭头;Mac:Alt + Shift + 上/下箭头上下移动代码块,Move Statement Up/Down, Ctrl + Shift + 上/下箭头,⼤括号内的,块状注释等都是代码块,遇到代码块也会⼀次跳到上⾯。

Webstorm常用快捷键备忘(Webstorm入门指南)

Webstorm常用快捷键备忘(Webstorm入门指南)

Webstorm常⽤快捷键备忘(Webstorm⼊门指南)WebStorm 是jetbrains公司旗下⼀款JavaScript 开发⼯具。

被⼴⼤中国JS开发者誉为“Web前端开发神器”、“最强⼤的HTML5编辑器”、“最智能的JavaSscript IDE”等。

与IntelliJ IDEA同源,继承了IntelliJ IDEA强⼤的JS部分的功能。

JetBrains WebStorm(java、html5开发⼯具) v8.0.5 官⽅英⽂版类型:编程⼯具⼤⼩:144.3MB语⾔:简体中⽂时间:2014-10-01查看详情现将最常⽤的快捷键挑出来备忘,既能⽅便记忆,⼜能提⾼⼯作效率。

WebStorm快捷键操作最近⼀段时间在写javascript时,找到⼀个灰常强悍的IDE。

名称叫:WebStorm⽬前是英⽂版的,功能很强⼤。

我也在慢慢摸索之中,现把它的⼀些常⽤的快捷键列出来,供使⽤者参考。

1. ctrl + shift + n: 打开⼯程中的⽂件,⽬的是打开当前⼯程下任意⽬录的⽂件。

2. ctrl + j: 输出模板3. ctrl + b: 跳到变量申明处4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)5. ctrl + []: 匹配 {}[]6. ctrl + F12: 可以显⽰当前⽂件的结构7. ctrl + x: 剪切(删除)⾏,不选中,直接剪切整个⾏,如果选中部分内容则剪切选中的内容8. alt + left/right:标签切换9. ctrl + r: 替换10. ctrl + shift + up: ⾏移动11. shift + alt + up: 块移动(if(){},while(){}语句块的移动)12. ctrl + d: ⾏复制13. ctrl + shift + ]/[: 选中块代码14. ctrl + / : 单⾏注释15. ctrl + shift + / : 块注释16. ctrl + shift + i : 显⽰当前CSS选择器或者JS函数的详细信息17. ctrl + '-/+': 可以折叠项⽬中的任何代码块,它不是选中折叠,⽽是⾃动识别折叠。

jetbrains webstorm基本操作

jetbrains webstorm基本操作

JetBrains WebStorm是一款功能强大的JavaScript IDE,可以帮助您更高效地编写和调试代码。

以下是WebStorm的一些基本操作:1.安装和启动:首先,您需要下载并安装WebStorm。

安装完成后,双击启动图标打开软件。

2.创建新项目:在WebStorm中创建新项目非常简单。

点击菜单栏中的“File”,然后选择“New Project”。

在弹出的对话框中,选择项目类型和存储路径,并点击“Create”按钮即可创建新项目。

3.导入现有项目:如果您已经有一个现有的项目,并想在WebStorm中进行开发,可以通过导入现有项目来实现。

点击菜单栏中的“File”,然后选择“Open”或者“Open Recent”,然后选择你要导入的项目文件夹。

4.代码编辑:WebStorm提供了丰富的代码编辑功能,包括代码高亮、代码提示、代码重构等。

您可以使用这些功能来提高编码效率。

5.运行和调试:在WebStorm中,您可以轻松地运行和调试JavaScript代码。

您可以通过设置断点、单步执行等方式来调试代码,以便找出并修复问题。

6.版本控制:WebStorm内置了版本控制功能,支持Git、SVN等版本控制系统。

您可以使用这些功能来管理您的代码版本,以及与其他开发人员协作。

7.集成开发环境(IDE)设置:您可以根据个人喜好和需求,自定义WebStorm的界面、快捷键、插件等设置,以优化您的开发体验。

8.帮助和支持:如果您在使用WebStorm时遇到问题,可以通过查看官方文档、搜索网络资源或寻求社区的帮助来解决问题。

以上只是WebStorm的一些基本操作,实际上,WebStorm的功能非常丰富,需要您在使用过程中不断探索和发现。

WebStormSVN使用

WebStormSVN使用

WebStormSVN使用WebStorm是一款由JetBrains开发的集成开发环境(IDE),专为JavaScript开发而设计。

它提供了许多强大的功能和工具,使得开发人员可以更加高效地进行代码编写、调试和测试。

WebStorm还支持多种版本控制系统,其中包括Subversion(SVN)。

Subversion是一种开源的版本控制系统,它允许多个开发人员协同工作,并对项目代码进行版本控制。

使用Subversion可以更好地管理代码,使得团队成员可以轻松地共享和更新代码。

1. 配置Subversion:首先,需要在WebStorm中配置Subversion。

在WebStorm的设置(Preferences)中,找到Version Control选项,选择Subversion,并配置Subversion的路径。

2. 检出代码:使用WebStorm可以轻松地从Subversion仓库中检出代码。

在WebStorm的菜单栏中选择VCS -> Checkout from Version Control -> Subversion。

然后输入Subversion仓库的URL和本地代码存放路径,并点击Checkout。

3. 更新代码:当有新的代码更新时,可以使用WebStorm的更新功能来获取最新的代码。

在WebStorm的菜单栏中选择VCS -> Update,WebStorm会自动从Subversion仓库中获取最新的代码。

5. 查看代码历史:WebStorm提供了查看代码历史的功能,可以查看特定文件的修改记录。

在WebStorm的菜单栏中选择VCS -> Show History,选择需要查看历史记录的文件,WebStorm会显示该文件的修改记录。

6. 解决冲突:当多个开发人员对同一文件进行修改时,可能会发生冲突。

WebStorm提供了解决冲突的功能,可以帮助开发人员解决冲突。

Webstorm开发工具使用教程详解

Webstorm开发工具使用教程详解

Webstorm开发⼯具使⽤教程详解Webstorm使⽤教程详解,供⼤家参考,具体内容如下Webstorm垂直分栏、左右分栏Webstorm 主题、背景、颜⾊等设置的导⼊导出使⽤WebStorm开发web前端⽹页中⽂乱码问题的解决⽅案★★★特别推荐:Webstorm 主题、背景、颜⾊等设置的导⼊导出1、导出设置2、导⼊设置Webstorm垂直分栏,在需要分栏的⽂件上右击,选着垂直拆分。

就可以拖动,形成左右分栏使⽤WebStorm开发web前端⽹页中⽂乱码问题的解决⽅案试了很多种解决⽹页显⽰中⽂乱码问题的⽅式,最后发现统⼀更改编码格式的⽅法才是正确有效⽽且⼀劳永逸的。

具体⽅法:file -----> settings 搜索encoding 在fileencoding下,将IDE Encoding,Project Encoding和下⾯的Default Encoding for properties file都更改为utf-8。

这样,之后每次新建的⽂件都会默认为编码格式为utf-8,不需要再在每个⽂件或者每个对⽂件的引⽤中添加charset=“utf-8”。

⾄于在统⼀更改编码格式之前编写的⽂件,如果在⽹页上显⽰是乱码,证明它之前的编码格式不是utf-8,需要将其内容复制出来后,将⽂件删除,再新建⼀个⽂件,再把内容粘贴到新建的⽂件中。

这样,该⽂件的编码格式也就更改了。

如果在webstorm中都显⽰为乱码的话,那只能在新建之后⼿动重新把中⽂写⼀遍。

建议:在统⼀更改编码格式之前先把有中⽂的内容复制到别的地⽅保存⼀下,⽅便新建的时候直接粘贴。

让webstorm兼容ES6语法推荐:以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

PhpStorm常用插件与配置

PhpStorm常用插件与配置

PhpStorm常⽤插件与配置
⼀、常⽤插件
1. CodeGlance,代码地图插件
2. Laravel Plugin,laravel插件
3. Translation,翻译插件
4. Key promoter,当你点击⿏标⼀个功能的时候,可以提⽰你这个功能快捷键是什么。

这是⼀个⾮常有⽤的功能,很快就可以熟悉软件
的快捷功能了。

如果有快捷键的,会直接显⽰快捷键
5. PHP composer.json support,在做php组件开发时,编辑composer.json⽂件时有对应的属性和值的⾃动完成功能
6. ApiDebugger,⼀个开源的接⼝调试IntelliJ IDEA插件,具有与IDEA⼀致的界⾯,⽆需切换程序即可完成⽹络API请求
7. Scorll From Source,在左侧的Project⽬录中快速显⽰当前编辑区的⽂件所在的位置(在编辑区右键选择Scorll From Source)⼆、配置
1、设置未保存的⽂件在tabs上显⽰*号:
打开:
Settings->Editor->General->Editor Tabs
勾选:Marl modified tabs with asterisk
2、函数注释的设置:
打开:
setting-》Editor-》FIle and Code Template-》Includes
3、显⽰⾏数:
打开:
Settings > Editor > General > Appearance
勾选:Show line numbers。

webstorm 使用技巧

webstorm 使用技巧

webstorm 使用技巧WebStorm 是一个功能强大的集成开发环境,适用于 JavaScript、TypeScript、HTML、CSS 等的开发。

下面是一些 WebStorm 的使用技巧:1. 添加框架智能提示/自动补全:在Setting-Editor-LiveTemplates检查IDE是否自带该框架的提示模版。

例如,对于Angular,可以在Angular的模板中找到所有的指令提示。

2. 快捷键:WebStorm 提供了大量的快捷键,可以快速高效地完成各种操作。

例如,按下 Ctrl+Shift+P 可以打开“运行”窗口,按下 Ctrl+Shift+N 可以打开“新项目”窗口。

3. 代码重构:WebStorm 支持各种代码重构操作,例如删除、复制、移动、重命名等。

可以通过菜单或快捷键进行这些操作,例如按下 Ctrl+D 可以复制当前行,按下 Ctrl+M 可以移动当前行。

4. 代码检查:WebStorm 提供了一系列代码检查工具,可以自动发现代码中的问题并给出建议。

例如,按下 Ctrl+Shift+F 可以打开“查找”窗口,输入“bug”可以查找代码中的问题。

5. 插件扩展:WebStorm 支持各种插件扩展,可以极大地提高开发效率。

可以通过 JetBrains 官网或 WebStorm 应用商店下载这些插件。

例如,安装“Codemagic”插件可以让 WebStorm 自动补全代码。

6. 调试程序:WebStorm 支持各种调试工具,可以方便地调试 JavaScript 程序。

例如,按下 Ctrl+Shift+B 可以启动调试器,按下 F5 可以运行程序。

7. 视图切换:WebStorm 支持各种视图切换工具,可以方便地在不同的视图之间切换。

例如,按下 Ctrl+Tab 可以在不同的编辑器之间切换,按下Ctrl+Shift+T 可以在不同的文件之间切换。

这些是 WebStorm 的一些基本使用技巧,希望能对您有所帮助。

webstorm关闭方法参数

webstorm关闭方法参数

webstorm关闭方法参数WebStorm是一款广受欢迎的集成开发环境(IDE),专门用于开发Web应用程序。

在使用WebStorm时,有时我们需要关闭方法参数窗口。

本文将介绍如何在WebStorm中关闭方法参数,以及一些其他相关的技巧和注意事项。

关闭方法参数可以有效地提高代码编写的效率和舒适度。

在默认情况下,WebStorm会在您输入方法名称后显示方法参数窗口,以帮助您更好地了解方法的使用方式和参数要求。

但是,有时候这个窗口可能会挡住您的代码或干扰您的操作。

因此,关闭方法参数窗口可以让您更好地专注于代码编写。

要关闭方法参数窗口,您可以按下Esc键或点击窗口右上角的关闭按钮。

这样,方法参数窗口将会关闭,您可以继续编写代码。

如果您日后需要再次打开方法参数窗口,只需在需要输入方法参数的地方开始输入方法名称,窗口将会自动弹出。

除了关闭方法参数窗口,WebStorm还提供了许多其他有用的功能和技巧,让您的代码编写更加高效。

下面我们将介绍其中几个重要的功能。

首先是代码补全功能。

WebStorm可以根据您输入的代码自动提供补全建议,以减少您的输入工作量。

当您输入一个方法名称或变量名时,WebStorm会自动显示可能的选项供您选择。

您可以使用上下箭头键选择您想要的选项,然后按下Enter键进行补全。

其次是代码导航功能。

当您的代码文件非常庞大时,找到特定的代码块可能会变得困难。

WebStorm提供了一些快捷键和功能,帮助您快速定位和导航到特定的代码位置。

例如,您可以使用Ctrl键加鼠标左键点击一个方法或变量,WebStorm将会自动跳转到该方法或变量的定义位置。

WebStorm还提供了代码重构功能,帮助您对代码进行优化和改进。

例如,您可以使用重命名功能来快速重命名一个方法或变量,而不必手动修改每个使用该方法或变量的地方。

我们还需要注意一些代码编写的最佳实践和规范。

例如,应该遵循良好的命名规范,使用有意义的变量和方法名称。

webstorm正则表达式用法教程

webstorm正则表达式用法教程

webstorm正则表达式用法教程WebStorm中的正则表达式(Regular Expression)是一种强大的文本处理工具,它使用特定的模式来匹配、查找、替换文本中的字符序列。

下面是一个WebStorm中使用正则表达式的简单教程:1.打开WebStorm并创建或打开一个项目:首先,启动WebStorm并打开你希望在其中使用正则表达式的项目。

2.打开查找/替换功能:在WebStorm中,你可以通过按Ctrl+F (在Mac上为Cmd+F)来打开“查找”对话框。

如果你想在找到的内容上进行替换,可以同时按Ctrl+R(在Mac上为Cmd+R)打开“替换”对话框。

3.启用正则表达式:在“查找”或“替换”对话框中,你会看到一个名为“正则表达式”(Regex)的复选框。

勾选这个复选框以启用正则表达式功能。

4.编写正则表达式:在“查找”或“替换”字段中,你可以开始编写你的正则表达式。

正则表达式由一系列特殊字符和模式组成,用于匹配文本中的特定模式。

例如,.匹配任何单个字符(除了换行符),*匹配前面的字符0次或多次,\d匹配任何数字等。

5.测试正则表达式:在编写正则表达式时,你可以通过点击“查找下一个”按钮来测试你的表达式是否按预期工作。

如果表达式匹配到文本,那么匹配的文本将会被高亮显示。

6.替换文本:如果你希望替换匹配到的文本,可以在“替换为”字段中输入你想要替换成的文本,然后点击“替换”或“替换全部”按钮。

7.关闭查找/替换对话框:完成查找和替换操作后,你可以点击对话框上的“关闭”按钮来关闭它。

请注意,正则表达式的语法和用法可能非常复杂,需要一些时间来学习和实践。

如果你对正则表达式的具体语法或用法有疑问,我建议你查阅相关的文档或教程,或者向有经验的开发者寻求帮助。

webstorm用法

webstorm用法

webstorm用法WebStorm是一款由JetBrains公司开发的集成开发环境(IDE),主要用于Web应用程序的开发。

它支持JavaScript、TypeScript、HTML、CSS等多种语言,提供了丰富的代码编辑和调试功能,以及强大的代码重构和自动化测试工具。

一、安装WebStorm1. 下载WebStorm安装包2. 双击安装包进行安装3. 激活WebStorm(需要购买或申请试用)二、创建项目1. 打开WebStorm2. 点击“Create New Project”按钮3. 选择项目类型(如Node.js或AngularJS)4. 设置项目名称和存储路径5. 点击“Create”按钮三、编辑代码1. 打开项目文件夹2. 双击打开需要编辑的文件3. 在编辑器中输入代码4. 使用快捷键或菜单栏进行保存、复制、粘贴等操作四、调试代码1. 在需要调试的代码行上设置断点(点击行号)2. 点击“Debug”按钮启动调试模式3. 执行程序,在断点处停止执行,可以查看变量值等信息五、重构代码1. 选中需要重构的代码块2. 右键点击选择“Refactor”3. 选择需要执行的重构操作(如重命名变量或方法)4. 确认操作后,WebStorm会自动修改相关代码六、自动化测试1. 创建测试文件(如test.js)2. 编写测试用例3. 选择需要测试的代码块4. 右键点击选择“Run”或“Debug”进行测试七、插件管理1. 打开WebStorm的插件管理器2. 搜索需要安装的插件(如ESLint或Prettier)3. 点击“Install”按钮进行安装4. 安装完成后,可以在编辑器中使用插件提供的功能八、版本控制1. 在WebStorm中打开Git仓库2. 进行代码修改并提交到本地仓库3. 推送本地仓库到远程仓库4. 使用WebStorm内置的版本控制工具可以方便地查看和比较不同版本的代码九、快捷键WebStorm提供了丰富的快捷键,可以帮助开发者更高效地编写代码。

webstorm 查找文件用法

webstorm 查找文件用法

WebStorm 文件查找用法WebStorm 是一款由 JetBrains 公司开发的集成开发环境(IDE),主要用于前端开发。

在日常的开发中,我们经常需要查找文件来定位代码位置、修改文件内容等操作。

WebStorm 提供了丰富的文件查找功能,以提高我们的开发效率。

本文将详细介绍 WebStorm 的文件查找用法,包括基本的快捷键、搜索选项和高级功能。

1. 基本快捷键在 WebStorm 中,使用快捷键可以快速打开文件查找窗口。

以下是一些常用的基本快捷键:•Ctrl + N:打开“Go to Class” 窗口,可以根据类名快速定位到对应的源代码文件。

•Ctrl + Shift + N:打开“Go to File” 窗口,可以根据文件名快速定位到对应的源代码文件。

•Ctrl + Shift + Alt + N:打开“Go to Symbol” 窗口,可以根据符号(如函数名、变量名)快速定位到对应的源代码位置。

•Shift + Shift:打开“Search Everywhere” 窗口,可以搜索项目中所有类型的资源(包括文件、类、符号等)。

通过使用这些基本快捷键,我们可以方便地进行文件查找和导航。

2. 搜索选项WebStorm 提供了多种搜索选项,以满足不同的查找需求。

下面是一些常用的搜索选项:•文件名搜索:在“Go to File” 窗口中,输入文件名即可进行文件名搜索。

支持模糊匹配和通配符。

•类名搜索:在“Go to Class” 窗口中,输入类名即可进行类名搜索。

支持模糊匹配和通配符。

•符号搜索:在“Go to Symbol” 窗口中,输入符号名称即可进行符号搜索。

支持模糊匹配和通配符。

•路径搜索:在“Go to File” 窗口中,使用“/” 开头来指定路径。

例如“/src/component” 可以快速定位到该路径下的文件。

•最近打开的文件:在“Go to File” 窗口中,按下方向键上键可以快速选择最近打开过的文件。

webstorm php 类方法

webstorm php 类方法

webstorm php 类方法WebStorm是一款由JetBrains公司开发的集成开发环境(IDE),主要用于Web开发。

它支持多种编程语言,包括JavaScript、TypeScript、HTML、CSS、Sass、Less等。

在WebStorm中,我们可以使用PHP来编写后端代码,并且可以使用类方法来组织我们的代码。

PHP是一种流行的服务器端脚本语言,它可以用于创建动态网页和Web应用程序。

在PHP中,我们可以使用类来组织我们的代码,这样可以使代码更加模块化和易于维护。

在WebStorm中,我们可以使用类方法来定义类的行为。

类方法是定义在类中的函数,它们可以访问类的属性和方法。

在PHP 中,我们可以使用关键字“public”、“private”和“protected”来定义类的属性和方法的可见性。

公共属性和方法可以在类的外部访问,私有属性和方法只能在类的内部访问,受保护的属性和方法可以在类的内部和子类中访问。

下面是一个使用类方法的PHP类的示例:```class Person {private $name;private $age;public function __construct($name, $age) {$this->name = $name;$this->age = $age;}public function getName() {return $this->name;}public function getAge() {return $this->age;}public function sayHello() {echo "Hello, my name is " . $this->name . " and I am " . $this->age . " years old.";}}$person = new Person("John", 30);echo $person->getName(); // 输出:Johnecho $person->getAge(); // 输出:30$person->sayHello(); // 输出:Hello, my name is John and I am 30 years old.```在这个例子中,我们定义了一个名为Person的类,它有两个私有属性$name和$age。

WebStorm功能特点以及使用指南

WebStorm功能特点以及使用指南

WebStorm功能特点以及使用指南WebStorm功能特点以及使用指南之前跟大家大家走马观花介绍了WebStorm的功能特点(),那么,相对于其他的前端开发IDE,WebStorm的亮点在哪呢?在使用过程中又有哪些需要注意的地方呢?现在我们就来了解一下吧。

首先看看WebStorm合其他的IDE有什么特别之处。

1) 自动保存,不需要你一次又一次地ctrl+s啦,所有的操作都直接存储,当然,万一键盘误操作也会被立即存储,不过我们可以通过本地版本控制解决这个问题。

2) 任何一个编辑器只要文件关闭了就没有历史记录了,但是webstorm有。

就是说,只要webstorm不关闭,你的文件随时可以返回到之前的操作,webstorm关闭重启后这些历史记录就没有了。

这样的坏处也是显然的,由此带来的内存消耗也必然比较大。

3) 任何一个编辑器,除了服务器svn之外,没有本地版本,但是webstorm提供一个本地文件修改历史记录。

4) 与时俱进的眼光。

zencoding于2009年出现于it界,在这之后,鲜有工具直接集成到里边。

webstorm 2.0之后就集成了。

node.js,html5,git,cvs等就不一一列举了。

5)提供的插件也是比较齐全,安装非常方便。

这样带来了另外的问题,以前的eclipse是安装第三方的,webstorm貌似不能安装第三方的插件。

6) 可以导出当前设置:File -> Export setting。

截下来是配置和使用:1)主题,把下载好的主题包放在C:\Users\jikey(用户名)\.WebIde10\config\colors目录下,然后重启webstorm,settings –> colors & fonts –>scheme name中选择主题名。

如果出现特别长代码对齐白线,在Editor –> Appearance –> Show vertical indent guides 前面的勾去掉即可。

webstorm 查找文件用法

webstorm 查找文件用法

webstorm 查找文件用法WebStorm 查找文件用法WebStorm 是一款强大的集成开发环境(IDE),广泛用于 web 开发。

当我们在开发过程中需要查找文件时,WebStorm 提供了一些方便快捷的查找功能。

以下是一些常见的 WebStorm 查找文件用法:使用快捷键查找文件在 WebStorm 中,可以使用快捷键来快速打开查找文件对话框。

1.使用Ctrl + Shift + N快捷键来打开文件查找对话框。

2.在对话框中,可以输入文件名的部分或者完整名称进行搜索。

3.使用上下箭头键来选择查找结果。

4.按下Enter键或者点击结果即可打开对应文件。

使用路径查找文件WebStorm 还支持使用路径查找文件,这在项目较大时非常有用。

1.使用Ctrl + Shift + N快捷键来打开文件查找对话框。

2.在对话框中,输入:后面跟着目标路径,例如app/controllers/user_。

3.按下Enter键或者点击结果即可打开对应文件。

使用模糊搜索查找文件WebStorm 还提供了模糊搜索功能,可以根据文件名的部分字符进行查找。

1.使用Ctrl + Shift + N快捷键来打开文件查找对话框。

2.在对话框中,只输入文件名的一部分即可,不需要输入完整名称。

3.WebStorm 会根据输入的关键词模糊匹配文件名,并展示相关结果。

4.按下Enter键或者点击结果即可打开对应文件。

使用快速查找查找文件除了使用文件名进行查找外,WebStorm 还提供了快速查找功能,可以根据文件内容进行查找。

1.使用Ctrl + Shift + F快捷键来打开快速查找对话框。

2.在对话框中,输入要搜索的关键词。

3.WebStorm 会搜索当前项目中所有文件的内容,并展示相关结果。

4.按下Enter键或者点击结果即可打开对应文件。

使用“跳转到定义”查找文件WebStorm 还提供了“跳转到定义” 功能,可以直接跳转到变量或函数的定义位置。

webstorm代码格式

webstorm代码格式

webstorm代码格式
WebStorm是一款强大的集成开发环境(IDE),它提供了许多代码格式化的工具和选项,可以帮助您快速整理和优化代码。

以下是WebStorm中常
用的代码格式化方法:
1. 使用快捷键:在Windows和Linux上,您可以按Ctrl + Alt + L来格式化代码;在Mac上,您可以使用Cmd + Option + L。

这将自动调整代码
的缩进、空格和换行。

2. 使用菜单命令:在WebStorm的顶部菜单栏中,依次选择Code -> Reformat Code。

这将打开一个对话框,您可以在对话框中选择是否对所
选文件进行格式化。

3. 使用插件:WebStorm还支持许多代码格式化插件,如Prettier、ESLint 等。

您可以通过安装这些插件来扩展WebStorm的代码格式化功能。

4. 自定义代码样式:WebStorm允许您自定义代码样式,包括缩进、空格、换行等。

您可以在File -> Settings -> Editor -> Code Style中修改代码
样式。

请注意,代码格式化只是提高代码可读性和维护性的手段之一,它可以帮助您保持代码的一致性和清晰度,但并不能解决所有的代码问题。

因此,在进行代码格式化时,还需要注意代码的可读性、可维护性和可扩展性。

webstorm typescript codestyle

webstorm typescript codestyle

webstorm typescript codestyle WebStorm是一款强大的JavaScript和TypeScript 集成开发环境(IDE),它提供了许多功能来帮助开发者更高效地编写代码。

其中之一就是代码样式(Code Style)设置,这可以帮助你统一代码风格,提高代码的可读性和可维护性。

在WebStorm中,你可以通过以下步骤设置TypeScript的代码样式:1.打开WebStorm,然后选择"File"->"Settings"(对于macOS,选择"WebStorm"->"Preferences")。

2.在打开的对话框中,选择"Editor"->"Code Style"。

3.在左侧菜单中,展开"TypeScript"并选择你想要配置的代码样式选项。

你可以在这里设置缩进、空格、换行符等格式规则。

4.在右侧的"Formatter"部分,你可以选择一个预设的代码样式或者创建一个自定义的样式。

预设的代码样式包括"Google","Standard","TSLint"等。

5.如果你选择了自定义的样式,你可以在"Settings"下面调整更多的格式选项。

6.完成设置后,点击"Apply"和"OK"保存你的设置。

此外,你还可以使用WebStorm的内置代码格式化工具来自动调整你的代码样式。

只需要选择你想要格式化的代码,然后按`Ctrl+Alt+L`(在macOS上是`Cmd+Option+L`)就可以自动按照你设置的代码样式进行格式化。

请注意,这些设置可能会根据你的WebStorm版本和你的个人偏好有所不同。

webstorm2023git用法

webstorm2023git用法

webstorm2023git用法WebStorm是一款强大的集成开发环境(IDE),专为Web开发者设计。

WebStorm提供了一整套工具,包括代码编辑、调试、版本控制等,使开发者能够更高效地进行开发工作。

在WebStorm中使用Git是一种非常常见的方式,本篇文章将介绍如何使用WebStorm2023中的Git。

一、安装Git插件在使用WebStorm进行Git操作之前,需要先安装Git插件。

在WebStorm的插件市场中搜索“Git”或“GitHub”等关键词,找到并安装“Git”插件。

安装完成后,WebStorm将提供Git相关的功能和工具。

二、创建Git仓库在开始使用Git之前,需要先创建一个Git仓库。

可以通过在WebStorm中创建一个新的文件夹,然后选择“版本控制”->“GitRepository”,即可创建一个新的Git仓库。

三、添加文件到Git仓库将文件添加到Git仓库中是使用Git的基本操作之一。

在WebStorm中,可以通过右键点击文件或文件夹,选择“版本控制”->“添加到Git仓库”来完成操作。

添加完成后,文件将被添加到Git 仓库中,并自动跟踪文件的修改历史。

四、提交更改当开发者对文件进行修改后,需要将更改提交到Git仓库中。

在WebStorm中,可以通过右键点击文件或文件夹,选择“版本控制”->“提交更改”来完成操作。

在提交窗口中,可以输入提交信息,描述此次更改的内容。

提交完成后,更改将被记录在Git仓库的历史记录中。

五、推送(推送)和拉取(拉取)代码使用Git进行团队协作时,需要使用推送和拉取操作来共享和同步代码。

在WebStorm中,可以通过右键点击Git仓库文件夹,选择“版本控制”->“推送(推送)代码”或“版本控制”->“拉取(拉取)代码”来完成操作。

通过这些操作,可以与其他开发者共享或同步代码,确保团队成员之间的代码一致性。

六、合并分支在团队协作中,有时需要合并不同的分支来保持代码的多样性。

webstorm格式化代码规则

webstorm格式化代码规则

webstorm格式化代码规则WebStorm是一个由JetBrains开发的集成开发环境(IDE),用于开发Web和JavaScript应用程序。

它提供了许多强大的功能和工具来提高开发人员的效率,其中之一就是代码格式化。

代码格式化是一种自动化处理代码样式的技术,它在不改变代码的功能的情况下,调整代码的结构和布局。

通过使用代码格式化,可以使代码更易读、更统一,提高团队协作和代码维护的效率。

在WebStorm中,可以使用默认的代码格式化规则,也可以根据自己的需求进行自定义。

下面是一些常用的代码格式化规则:1.缩进与对齐:缩进是代码中的一个重要元素,它可以使代码的层次结构清晰。

在WebStorm中,可以设置缩进的大小和使用的缩进字符(制表符或空格)。

通常建议使用空格进行缩进,并使用2或4个空格进行缩进。

2.换行与折行:换行和折行是代码格式化中的重要部分,它可以使代码更易读。

在WebStorm中,可以设置代码超过一定长度时是否自动换行,以及如何折行(使用悬挂缩进还是自动缩进)。

通常建议在代码长度超过80到120个字符时进行换行,并使用悬挂缩进进行折行。

3.空格与空行:空格和空行是代码格式化中的另一个重要部分,它们可以提高代码的可读性。

在WebStorm中,可以设置在不同部分(例如函数参数列表、括号等)添加或删除空格,并设置不同部分之间的空行数。

通常建议在不同语句之间添加一个空行,以及在函数声明和调用之间添加空格。

4.括号和引号:括号和引号是代码中常用的标点符号,它们可以使代码更易读。

在WebStorm中,可以设置代码中使用的括号和引号的样式(例如单引号还是双引号),以及在代码块中是否自动添加括号。

通常建议使用一致的括号和引号样式,并在代码块中始终使用括号。

5.对齐与对齐风格:对齐是代码中的一种布局方式,它可以使代码更具可读性。

在WebStorm中,可以设置不同语句之间的对齐方式,以及不同部分之间的对齐方式。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

概述
此文章用来记录jetbrain系列工具使用的小技巧。

如果没有特别说明的话,这些技巧在webstorm、phpstorm、idea中是通用且是跨平台的。

live edit功能与浏览器实现同步实现步骤
live edit是一个免刷新的功能,能捕捉到页面的改动(css、html、js改动),然后浏览器自动刷新,这样提高了开发的效率。

很赞的一个功能,唯一不足的是,要安装JB插件到浏览器中,对于不能安装该插件的浏览器来说,该功能就鸡肋了。

1. 打开WebStore的设置对话框,找到live edit选项,选中Enable live editing。

2. 打开Chrome浏览器,进入Chrome网上商店,搜索JetBrains IDE Suport扩展程序。

点击“添加至
Chrome“按钮,安装该扩展程序到Chrome。

这时候,Chrome浏览器工具栏上就会出现一个JB图标。

注(有时可能在网上商店里搜索不到,我这里提供了一个地
址:https:///webstore/detail/jetbrains­ide­
support/hmhgeddbohgjknpmjagkdomcpobmllji )
3. 在WebStorm中新建一个html文件,然后在页面内单击鼠标右键,选择debug选项。

4. 这时,webStorm会启动默认浏览器,并且激活JB浏览器插件。

5. 返回到Webstorm编辑器,尝试修改页面中的内容,然后打开浏览器,看看页面是否自动刷新了没。


果配置正确的话,一改动代码,浏览器会立刻刷新的,这简直就是重构开发的圣器呀。

webstorm内置服务器失效的问题
默认情况下,我们可以直接运行本地的html页面,它内部会开启64432端口来运行我们的页面,这样我们不要配置烦杂的后台环境,也可以简单测试一些需要服务器配合的页面了。

启动服务的方式如下:
如图我们可以有三种方式或者通过快捷键的方式来启动内置服务器了。

这时会在浏览器打
开http://localhost:63342/projectName/*.html这样的页面。

可是有一次配置了sftp导致了启动不了内置服务。

原因是webstom会把项目当作sftp中的项目发布出去。

而发布的url是web server root url指定的。

如图所示:
所以每次我们运行的项目中的页面的时候,我们希望是通过内置服务器运行的,但是浏览器中打开的连接是图中红线指定的URL。

所以我们可以将其置空,告诉浏览器不要使用sftp指定的URL,而是使用内置服务器生成的URL。

(完美搞定)
webstorm中设置nodejs使它能智能提示。

这是我在SF问题社区中的提的问题,问题可见/q/1010000002447282。

默认情况下。

我们写的NodeJS脚本是不会智能提示的,如图所示:
图中是一个NodeJS的服务器程序,我们让服务器监听端口时,下面显示的只能提示都来自ECMASript。

那么如何开启呢?
第一步,File→setting→language and frameworks→javascript→libraries→勾选要用到的库,即(Node.js v0.10.24 Core Modules)
第二步,编辑刚才勾选的项目。

选中该项目并且单击右则的Edit按钮,IDE会弹窗一个窗口,如下所示:
如果先前箭头指向的部分已经自动存在,那么我们无需配置其他的选项,退出编辑窗口,保存配置就行了,如果不出意外的话,智能提示就能使用了。

如果箭头指向的部分显示为空的话,那怎么办呢?别急,我们接着配置就行了。

同样按下面的顺序打开File→setting→language and frameworks‐>Node.js and NPM!
图片描述
在第二个箭头指向的地方,即sources of Node.js Core Modules指向的地方,有可能出现两种情况,第一种就是上面图上显示的那样,显示Core Module已经安装了。

另外一种
是/q/1010000002447282提问中显示的情况,
如果是这种情况的话,单击Configure按钮下载源码即可,下载完成后,不做其他的修改,保存配置,退出即可。

如果是第一种情况的话,即sources of Node.js Core Modules下面的选项不为空,但是源码又没下载,这时就得靠自己手动下载NodeJS的源码,下载后得到的是一个归档压缩包,解压它并建议放在NodeJS安装的目录下。

准备就绪后,重复第一步和第二步的操作。

单击图中箭头指向的按钮。

由于NodeJS的源代码不是单一的JS文件。

所以选择添加目录选项(attach Directories)。

最后把刚下载好的源码添加到目录中去。

运用并且保存更改的配置后,不出意外的话,在项目的External Libraries会出现我们刚才添加的库。

这时,智能提示就能使用了。

除此之外,我们还以按住CTRL键并点击所选择的方法,可以看看他的源码实现。

ok,总结来说,配置还是蛮麻烦的。

并且以后智能提示这块,原理和示例差不多。

如何快速比较两个文件的不同
这也是一个很常用的功能吧,有时候想比较两个文件的异同,但是又不想使用svn或者其他的diff工具的话,这时webstorm就派上了用场了。

使用方法也很简单,选中两个文件,然后按下CTRL+D快捷键,这时webstorm的diff工具就被调用了。

webstorm配置sftp
在配置sftp之前,需要确认的是你的linux已经配置了ssh,至于ssh的配置可以参考我的这篇文
章:/blog/liangyi/1190000002492828
如果已经安装好了,可以直接配置了,配置的流程如下:Tools‐>Deployment‐>Configuration,之后就会弹出一个配置的对话框。

如图所示:
注意一定要选择SFTP,不能选择FTP和FTPS。

Name的配置项最好选择对应服务器的IP地址名。

之后就是各种配置了。

配置的时候有个要注意的地方。

如果设置了Web server root URL就会导致上面说的那样。

导致webstorm 静态服务器的指向会一直指到这个URL地址。

填写完毕后,单击测试按钮,即Test SFTP connection,第一次会要求你确认验证一些信息。

如果不粗意外的话,那么上都能正确连接上。

测试测功后,我们就可以,把服务器上的项目导入的本地来了,这样本地不需要配置一些复杂的环境,而只是安静的提供编码环境了。

相关文档
最新文档