【WebStorm】前端开发IDE利器

#【WebStorm】前端开发IDE利器 工欲善其事，必先利其器，敲代码前，先选好编辑器，好的工具可以帮助我们进行高效的开发和写出优质的代码。结合WebStorm（Mac）来分析一个优秀高效的开发工具应该具备的几个方面功能：

代码格式化Format

快速格式化代码，不需要浪费额外的时间处理不规范的代码格式（当然，敲代码的时候还是要适当的有意识的注意代码格式）

1. 默认快捷键Format: option + command + l
2. reformat code when saving a file:(https://stackoverflow.com/questions/21217791/how-to-auto-format-code-in-webstorm)

• install plugin: "Save Actions";
• config plugin: File - Settings - Other Settings; check "Format file" option.

代码模版snippet

比如/// + tab时自动生成定义好的注释代码片段。可是在重复性代码中节省开发时间

1. 自定义代码模版(https://www.jianshu.com/p/7a45601eab66)

自动检测错误代码

各种代码工具自动提示html/css/js等不规范的地方，节省查找低级语法或者不规范的地方

1. 内置的Eslint代码修复处理

• option + enter

• 选择ESLint：Fix current file

编辑快捷键

任何一个优秀的编辑器必不可少的（一下列出开发中常用的webstrom快捷键）

• 查找并打开文件 command + shift + o
• 选中光标所在位置的单词 option +（上/下）
• 光标以单词为单位跳转 option + （左/右）
• 切换标签页面 command + option + （左/右）
• 关闭当前标签页 command + w
• 选中行： 光标所在行 command + c
• 光标移动到行末/行首： command + (左/右）
• 选中多个单词： 选中单词 --》 control + comand + g

自动Debug

其实使用chrome和火狐的debug功能已经满足日常开发中的debug，方便快捷。 (Webstorm结合chrome调试js)https://blog.csdn.net/sujun10/article/details/54139560

Git 或 Svn 版本控制

项目代码管理，webstorm中相关功能还是很全面的，可自行了解

自动文档工具

开发过程中应保留相关开发文档，编辑器自动生成代码文档注释。

1. 内置JSDoc注释

• 函数前 /** + enter

转载于:https://my.oschina.net/u/3682731/blog/1842277