简介
下载地址：Download WebStorm: The Smartest JavaScript IDE by JetBrains
快捷键
快捷键导入导出：C:\Users\xxx\.WebStorm2018.1\config\keymaps\Default copy.xml
注意：可以把Idea的配置文件复制过来改。
查看
我的快捷键 | 原来快捷键 | 作用 | 描述 |
ctrl+shift+i | 弹出框查看src属性的图片 |
其他
我的快捷键 | 原来快捷键 | 作用 | 描述 |
alt+z | alt+f2 | 使用浏览器查看 | Web Preview... |
alt+, | 无 | 先end，再,，再enter | 自定义的宏。取名为：js_obj_nextline |
alt+shift+鼠标 | 列模式选择 |
编辑
编辑(HTML/CSS)
Zen Coding
简介
有Zen CSS、Zen HTML。输入几个单词，然后再按下tab可快速生成代码。
所在位置：File=> Settings=> Editor=> Live Templates
使用
按键 | 作用 |
html:5 | html5结构 |
link:css | <link rel="stylesheet" href="style.css"/> |
script | <script></script> |
script:src | <script src=""></script> |
ul+ | <ul> <li></li> </ul> |
a:link | <a href=”http://”></a> |
a:mail | <a href=”mailto:“></a> |
form:get | <form action="" method="get"></form> |
input:hidden | <input type="hidden" name=""> |
div#name | <div id="name"></div> |
div.name | <div class="name"></div> |
div.a.b | <div class="a b"></div> |
标签自动补全（WS自带的Emmet插件）
作用 | 示例（使用p代替举例） |
p | 输入p，按Tab键 => <p></p> |
p#id | p#addr，按Tab键 => <p id="attr"></p> |
p.class | p.addr，按Tab键 => <p class="attr"></p> |
p[属性] | p[a=attr]，按Tab键 => <p a="attr"></p> |
p{包含的内容} | p{显示的内容}，按Tab键 => <p>显示的内容</p> |
标签>子标签 | div>p (代表p是div 的子元素)，按Tab键 => <div> <p></p> </div> |
标签+标签 | div+p (代表p和div 是同级元素)，按Tab键 => <div></div> <p></p> |
重复N个标签(块)*数字 | div>p*2，按Tab键 => ul>(li>a)*2，按Tab键=> <ul> |
内容/属性 自动编号，使用符号$ | p*2>{这是第$$行}，按Tab键=> <p>这是第01行</p> div#id$.class$$*2>{这是内容}，按Tab键=> <div id="id1" class="class01">这是内容</div> |
标签属性自动编号，使用符号$ | div#id$.class$$*3，按Tab键 => <div id="id1" class="class01"></div> <div id="id2" class="class02"></div> <div id="id3" class="class03"></div> |
复杂例子 | ul.menu>li*2>a[href=#]{显示内容$$}，按Tab键 => <ul class="menu"> |
快速提示技巧
作用 | 用法 | 示例 |
属性的键的自动提示 | 输入横线隔开的各个单词的前边几个字母 | bc=> background-color backc=>background-color brc=> border-right-color |
属性的值的自动提示 | 输入冒号后再输入一个空格，会跳出来 | width: |
打开智能提示
File=> 取消“Power save mode”
编辑(JS)
代码模板
File=> Settings=> Editor=> Live Templates=> JavaScript
快捷键 | 对应内容 |
log | console.log() |
info | console.info() |
warn | console.warn() |
error | console.error() |
us | "use strict"; |
自定义的 | |
thr | throw new |
ad | alert("$FILE_NAME$.$LINE_NUMBER$"); |
代码提示
安装相关库即有相关提示。
File=> Settings=> Languages&Frameworks=> JavaScript=> Libraries
如果代码里有在线库，则鼠标放上去，点击“Download Library”即可。默认下载到：WS安装目录\config\javascript\extLibs
编辑vue
新建vue时的模板
File=> Settings=> Editor=> File and Code Templates=> Vue Single File Component
复制时class不自动改为className
File=> Settings=> General=> Smart Keys=> JavaScript=> 取消选中“Convert attributes when pasting HTML to JSX files”
详
显示
webpack的路径
简介
Webpack 经常会配置一些别名 alias 指向特定的目录，这样在使用 import 等语句时就不用写一大堆的相对路径了，常见的是将项目的 src 设置为 @，比如某文件的路径是 src/libs/util.js，配置后，任何地方就可以这样导入：
import util from '@/libs/util.js'。
要想webstorm支持这种别名使其下方不出现波浪线提示且支持跳转（ctrl+鼠标左键），则需要配置，设置仅对当前项目有效，不会影响到其它项目。。配置方法见下边。
配置方法
1.写一个js文件，内容如下(本处命名为:webpack.aliasConfig.js)
将其放到一个合适的位置（比如webstorm安装目录）
'use strict'
const path = require('path')
module.exports = {
context: path.resolve(__dirname, './'),
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': path.resolve('src'),
'@assets': path.resolve(__dirname, 'src/assets'),
'@pages': path.resolve(__dirname, 'src/pages'),
'@comp': path.resolve(__dirname, 'src/components'),
'@api': path.resolve(__dirname, 'src/api'),
'@plug': path.resolve(__dirname, 'src/plugins'),
'@utils': path.resolve(__dirname, 'src/utils')
}
}
}
2.配置webstorm
File=> Settings=> Languages & Frameworks=> JavaScript=> Webpack=> webpack configuration file: => 选择上边的文件
详解
WebStorm 默认是能够解析 webpack 配置文件的，也就是说你配置了 webpack 别名 alias 后，天生就支持这种快速跳转文件，而且。但是 Vue CLI 3 里，是没有传统的 webpack 配置文件的，因为使用另一种写法集成到了 xxx.js 里，而这种写法webstorm是不识别的，它格式如下：
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/good-analysis-total-components'))
.set('_c', resolve('src/components'))
}
}
标签下边的黄色波浪线
如果碰到不认识的标签或者不符合规范的标签，webstorm会用黄色的波浪线标识。对应的设置位置如下：
File=> Settings=> Editor=> Inspections=> 中间列：HTML=> Unkown HTML tag（此处可控制开关）=> 右侧“Options”=>
Custom HTML tags=> 此处可以增删标签（若添加了某个标签，则不会用黄色波浪线提醒）
其他
配置浏览器
File=> Settings=> Tools=> Web Browsers
减少内存占用
方案1：disable用不到的插件
方案2：取消不必要的文件夹索引
文件夹上=> 右键 Mark directory as=> Exclude 就不会对该文件夹进行索引。
或者：File=> Settings=> Editor=>File Types=> ignore files and floders=> 添加 node_modules
只要取消不必要的文件夹索引，比如node_modules,bower_components 这些，可以减少很多内存的占用
其他网址
在 WebStorm 中，配置能够识别 Vue CLI 3 创建的项目的别名 alias @
