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 這些，可以減少很多記憶體的占用