【程序员基础篇】webstorm使用

webstorm

文档

webstorm 的配置分为项目配置和全局配置，在打开一个项目的时候，会在项目根目录生成.idea的隐藏文件夹，这个文件夹里保存的就是项目配置，而全局配置保存在文档目录，全局配置都可以导出。

插件

• AceJump
• altn8
• eslint-plugin
• gitignore
• IdeaVim
• Key_promoter
• TabSwitch

主题

配色方案

solarized

配置

打开多个项目

WebStorm默认情况下一次只能打开一个项目，这点很不爽，其实是可以设置的。（注：如果你一开始就建了项目再来配置，记得要把左边显示的根路径移除，不然可能点击Add Content Root配置后也不一定能生效）
方法：File -> Settings -> Directories -> Add Content Root 中添加你当前的工程目录。

配置webserver选项（端口）

方便其他ip设备访问(如手机等测试效果）
方法：File -> Settings -> Build,Execution,Development -> Debugger ->port

设置文件的默认编码

方法：File -> Settings -> Editor -> File Encodings -> IDE Encoding,Project Encoding.
(注：配置前和配置后都可以打开页面，在页面的右下角显示有编码)

文件模板配置

文件模板即新建文件的时候可以初始化一个预先定义好的文件内容，比如常见的HTML、CSS、JS文件等。这些文件模板在IDE Settings》File and Code Templates 里添加和修改，如图：

项目文件夹标记配置

在开发的时候，常常资源等信息并不是指向根目录，在书写资源路径的时候提示是不正确的，这时候就需要配置文件夹功能了。打开Project Settings > Directories 里打开，绿色的为测试目录，红色的为排除目录，蓝色的为资源根目录。

项目代码检查

打开Project Settings > JavaScript > Code Quality Tolls > JSHint 启用，默认配置即可。然后在末尾添加全局变量，以通过代码检查

CSS预处理语言的预编译、JS 实时压缩

有了 webstorm，基本不需要 grunt、gulp 等前端开发辅助工具了，webstorm 内置的文件监听，可以完成常用的功能，如 CSS 预处理语言的预编译、JS 的实时压缩等。
打开Project Settings > FIle Watchers，然后点击下边的加号开始新建即可

项目脚本库

项目在开发的时候，可以配置项目已经用到的脚本库，可以方便的在编程的时候提示，加快开发速度和代码质量检测。内置的有HTML5、NodeJS 等，如果不存在的也可以手动添加。在 Project Settings > JavaScript > Libraries 里打开

快捷键

# 格式化
command+alt+l