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

luckyyulin
217 声望9 粉丝

有一种鸟没有脚,他的一生只能在天上飞来飞去,飞累了就在风里睡觉,一辈子只能落地一次,那就是他死的时候


引用和评论

0 条评论