WebStorm--软件设置

简介

下载地址：https://www.jetbrains.com/webstorm/download/#section=windows

快捷键

见：Intellij Idea设置_快捷键

快捷键导入导出：C:\Users\xxx\.WebStorm2018.1\config\keymaps\Default copy.xml

注意：可以把Idea的配置文件复制过来改。

我的快捷键	原来快捷键	作用	描述
alt+z	alt+f2	使用浏览器查看	Web Preview...
alt+,	无	先end，再,，再enter	自定义的宏。ctrl+,也是调出搜狗输入法的快捷键，需要将搜狗的这个快捷键改为别的，方法：右键浮动搜狗输入法的“S”=> 输入法管理=> 搜狗输入法快捷键
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" target="_blank" rel="external nofollow" />
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插件）

其他网址：webstorm自动补全，即HTML标签简写规则_阿桂的博客-CSDN博客

作用	示例（使用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键 => <div>    <p></p>    <p></p> </div> ul>(li>a)*2，按Tab键=>  <ul>     <li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ></a></li>     <li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ></a></li> </ul>
内容/属性 自动编号，使用符号$	p*2>{这是第$$行}，按Tab键=>  <p>这是第01行</p> <p>这是第02行</p> div#id$.class$$*2>{这是内容}，按Tab键=> <div id="id1" class="class01">这是内容</div> <div id="id2" class="class02">这是内容</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">     <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >显示内容01</a></li>     <li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >显示内容02</a></li> </ul>

快速提示技巧

作用	用法	示例
属性的键的自动提示	输入横线隔开的各个单词的前边几个字母	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

显示

webpack的路径

其他网址

webstorm中不能识别react、vue alias 路径别名符号_一只前端小菜鸟的博客-CSDN博客

在 WebStorm 中，配置能够识别 Vue CLI 3 创建的项目的别名 alias @

简介

        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 这些，可以减少很多内存的占用