【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