1. github鐨剉ue椤圭洰鎬庝箞鍦╲scode杩愯
鎵撳紑config/index.js骞舵壘鍒癲evtool灞炴с
鐢ㄦ湰鍦癵it瀹㈡埛绔灏唙ue椤圭洰浠巊ithub鍏嬮殕鍒版湰鍦帮紝鐢╲scode鎵撳紑锛屽畬鎴愮紪杈戙傚湪vscode閲屾柊鎵撳紑涓闂蜂憨涔庝釜鍛戒护琛岀粓绔鑰愯厞锛屽湪缁堢绐楀彛閲屼娇鐢╲ue瀵瑰簲鐨勮剼鎵嬫灦鍛戒护鍚鍔ㄩ」鐩銆
閫氳繃蹇鎹锋柟寮忔墦寮VisualStudioCode宸ヨ殏鎮夊叿锛岀劧鍚庢柊寤洪潤鎬侀〉闈銆傚垱寤轰竴涓闈欐侀〉闈table.html锛屽苟娣诲姞椤甸潰浠ｇ爜锛岀劧鍚庝繚瀛橈紝浣跨敤娴忚堝櫒鏌ョ湅銆傜偣鍑籉ile鑿滃崟锛岄夋嫨OpenFolder锛屽皢椤圭洰瀵煎叆鍒癡isualStudioCode銆
2. 如何优雅地使用 VSCode 来编辑 vue 文件
先来扒一扒使用 PHPStorm 遇到的问题：
vue文件虽然可以通过插件来解决高亮问题，但是 <script> 标签中的 ES6 代码的识别老是出问题，箭头函数有的时候能正确识别，有的时候会报错
无法正确识别 vue 文件中的 jsx 语法
无法正确识别和高亮 vue 文件 <style> 标签中使用的 less 语法
vue文件中 <template> 部分使用了大量的自定义标签（自定义组件）和自定义属性，会报一堆 warning
经常性卡死
webpack实时编译的错误不能直接展示在代码编辑器内，还得自己到控制台中查看
如何安装 vscode
很简单，传送门： 官网下载安装
第一步，要支持 vue 文件的基本语法高亮
这里，我试过好3个插件： vue , VueHelper 和 vetur ，最终选择使用 vetur 。
安装插件： Ctrl + P 然后输入 ext install vetur 然后回车点安装即可。
p.s: vscode 的插件安装比 PHPStorm 的插件安装更快捷方便，安装完成后还不用重启整个程序，只要重新加载下工作区窗口就可以了。
安装完 vetur 后还需要加上这样一段配置下：
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
这时可以打开一个vue文件试试，注意下右下角状态栏是否正确识别为 vue 类型：
如果被识别为 text 或 html ，则记得要点击切换下。
第二步，要支持 vue 文件的 ESLint
可能还有人会问为什么要 ESLint ？没有 lint 的代码虽然也可能可以正确运行，但是 lint 作为编译前的一道检测成本更小，而且更快。此外， ESLint 还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。
jshint 本来也是个不错的选择，但是 ESLint 对 jsx 的支持让我还是选择了 ESLint.
安装插件： Ctrl + P 然后输入 ext install eslint 然后回车点安装即可。
ESLint 不是安装后就可以用的，还需要一些环境和配置：
首先，需要全局的 ESLint , 如果没有安装可以使用 npm install -g eslint 来安装。
其次，vue文件是类 HTML 的文件，为了支持对 vue 文件的 ESLint ，需要 eslint-plugin-html 这个插件。可以使用 npm install -g eslint-plugin-html 来安装
接着，安装了 HTML 插件后，还需要在 vscode 中配置下 ESLint：
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
},
最后，别忘了在项目根目录下创建 .eslintrc.json , 如果还没创建，还可以使用下面快捷命令来创建：
这样一来 vue 中写的 js 代码也能正确地被 lint 了。
要是不小心少个括号之类的都可以有对应的报错:
多余 import 也都能报错:
还是蛮智能的。
第三步，配置构建任务
vue 项目的构建我选择用 webpack ，不过，并不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 写的 node 脚本。 脚本主要有两个，一个是 build/bin/build.js 另一个是 build/bin/watch.js 分别是单次构建和实时构建。
于是乎，对应 vscode 中的 tasks 也是有两个： build 和 watch ，简单配置如下：
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
// use `Ctrl+P` and type `task` + SPACE + <taskName> to run a task
"version": "0.1.0",
"tasks": [
{
"taskName": "build",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/build.js"
],
"suppressTaskName": true,
"isBuildCommand": true
},
{
"taskName": "watch",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/watch.js"
],
"suppressTaskName": true,
"isBackground": true
}
]
}
这样配置好后，按 Ctrl + Shift + B 即可开始单次构建。 不过单次构建比较慢（要10秒+），一般我都用实时构建： Ctrl + P 然后输入 task watch <回车> 即可开始实时构建。实时构建除了第一次比较慢，其他时候还是非常快的，一般1秒内就可以构建好。
最后，webpack 构建错误提示
webpack 构建失败后一般都会有错误提示，会显示在输出窗口中：
为啥是彩色的？ 因为装了 Output Colorizer 这个插件。
当然，这样还是不够方便 -- 实时构建是后台运行的，“输出”窗口一般也都是在后台，每次保存完文件还得点开岂不麻烦。
要是能做到像 ESLint 一样直接把错误标到编辑器上面就好了。真的可以吗？翻了下 vscode 的文档，发现有神奇的 problemMatcher -- 可以对任务输出进行解析，解析出的问题会显示在“问题”窗口中，如果还有文件名行号和列号，则会在源代码编辑窗口中对应的位置标出来。
先放个最终效果：
在这个文件的第32行，import 了一个不存在的模块，这样的错误在 ESLint 中当然是检查不出来的，然而在 webpack 的实时构建中会报错：
这个事情的困难在于两点：
如何通过 problemMatcher 把这个错误给抓出来？
如何找到错误对应的行号？（如果可能的话，还有列号）
webpack的错误输出格式并不是完全统一的，而且有些还没有行号 -- 一方面可能是 webpack 的 bug ，另一方面 vue 文件在构建的时候会拆成 template, script 和 style 三个方面进行构建，报错的行号可能对不上。
最终我的解决方案是对 webpack 的错误重新格式化输出，然后匹配：
首先，重新格式化输出需要 format-webpack-stats-errors-warnings 这个包（偶新写的）
npm install --save-dev format-webpack-stats-errors-warnings
然后，到 build/bin/build.js 和 build/bin/watch.js 中在 webpack 构建完成的回调函数中增加这个格式化后的输出：
更多使用介绍见 github
最后，在 .vscode/tasks.json 中，每个任务下添加 problemWatcher :
// ...
{
"taskName": "build",
// ...
// build 任务的:
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
}
}
}
{
"taskName": "watch",
// ...
// watch 任务的：
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
},
"watching": {
"activeOnStart": true,
"beginsPattern": "^\\s*Webpack begin run",
"endsPattern": "^\\s*Build complete at"
}
}
// ...
}
// ...
注：在 watch 任务中，为了匹配何时开始和何时结束，我在 webpack 构建的 run 和 watch 时增加了一个 console.log('Webpack begin run') 的打印，而在构建完成后增加了一个 console.log("Build complete at ..") 的打印。
3. 鐢╲scode寮鍙憊ue锛屾湁寰堝氭姤绾锛屽疄闄呬笂娌℃湁閿欒锛屽彲浠ユｅ父鍚鍔锛
杩欑嶆儏鍐甸氬父鏄鍥犱负VSCode鐨勬彃浠舵垨鑰呴厤缃涓嶆ｇ‘锛屽艰嚧瀵筕ue椤圭洰鐨勮娉曟鏌ユ湁璇銆傝峰皾璇曚互涓嬫ラゆ潵瑙ｅ喅杩欎釜闂棰橈細
纭淇濅綘宸茬粡瀹夎呬簡Vetur鎻掍欢銆傝繖鏄涓涓寰堝彈娆㈣繋鐨刅ue寮鍙戞彃浠讹紝鍙浠ユ敮鎸乂ue璇娉曢珮浜銆佹櫤鑳芥彁绀恒佷唬鐮佽ˉ鍏ㄧ瓑鍔熻兘銆傚湪VSCode涓锛岀偣鍑诲乏渚х殑鎻掍欢鍥炬爣锛屾悳鑰呴傜储鈥淰etur鈥濓紝鐒跺悗瀹夎呭畠銆
濡傛灉浣犲凡缁忓畨瑁呬簡鍏朵粬鐨刅ue鎻掍欢锛岃峰皾璇曠佺敤瀹冧滑锛屼互閬垮厤鎻掍欢涔嬮棿鐨勫啿绐併
纭淇濅綘鐨勯」鐩涓鍖呭惈涓涓.eslintrc.js鎴栬.eslintrc.json鏂囦欢锛岀敤浜庨厤缃瓻SLint鐨勮勫垯銆傚湪杩欎釜鏂囦欢涓锛屼綘鍙浠ユ坊鍔犱互涓嬪唴瀹规潵閰嶇疆Vue鐨勮勫垯锛
mole.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'no-console': process.env.NODE_ENV === 'proction' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'proction' ? 'warn' : 'off',
},
};
纭淇濅綘鐨勯」鐩涓鏈変竴涓.vscode鏂囧潶杩熶欢澶癸紝鍏朵腑鍖呭惈涓涓猻ettings.json鏂囦欢銆傚傛灉娌℃湁锛岃峰垱寤轰竴涓銆傚湪settings.json鏂囦欢涓锛屾坊鍔犱互涓嬪唴瀹癸紝浠ヤ究璁￢SCode浣跨敤Vetur鍜孍SLint鎻掍欢锛
{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"vetur.validation.template": true,
"vetur.validation.script": true,
"vetur.validation.style": true
}
淇濆瓨鎵鏈夋洿鏀癸紝鐒跺悗閲嶅惎VSCode銆
缁忚繃浠ヤ笂姝ラわ紝VSCode搴旇ヨ兘姝ｇ‘璇嗗埆Vue椤圭洰棣栦俊閮戜腑鐨勮娉曪紝绾㈢嚎闂棰樹篃搴旇ュ緱鍒拌В鍐炽傚傛灉闂棰樹粛鐒跺瓨鍦锛岃锋鏌ヤ綘鐨勯」鐩渚濊禆鏄鍚︽ｇ‘瀹夎咃紝浠ュ強閰嶇疆鏂囦欢鏄鍚﹁剧疆姝ｇ‘銆
4. vue VSCode 寮鍙戣剧疆锛坔tml鑷鍔ㄨˉ鍏ㄣ乪slint淇濆瓨鏃舵牸寮忓寲銆乿etur 鏍煎紡鍖杊tml锛
File -> Preference -> Setting ->鎼滅储setting.json -> Edit in settings.json
settings.json
鏂规硶1锛欶ile -> Preference -> Setting ->鎼滅储setting.json -> Edit in settings.json
settings.json
Setting.json
鏂规硶2锛欶ile -> Preference -> 鎼滅储妗嗚緭鍏ワ細琛岃宖iles.autoSave
涔嬪悗鑳界湅鍒 files.autoSave 鐨勫彲閫夐」鏈
off : 鍏抽棴鑷鍔ㄤ繚瀛橈紙榛樿わ級
afterDelay: 寤惰繜xx鏃堕棿鍚庝繚瀛橈紝鍙鍦 "files.autoSaveDelay" 涓閰嶇疆寤惰繜鏃堕棿锛
onFocusChange: 缂栬緫鍣ㄥけ鍘荤劍鐐规椂鑷鍔ㄤ繚瀛橈紱
onWindowChange: 绐楀彛澶卞幓鐒︾偣鏃(缂栬緫鍣ㄧ獥鍙ｇ殑鍒囨崲锛屾岄潰绐楀彛鐨勫垏鎹)鑷鍔ㄤ繚瀛橈紱
瀹夎 ESLint https://cn.eslint.org/
vscode 涓瀹夎 ESLint 鎻掍欢
鐒跺悗閰嶇疆 vscode 鐨 setting.json
File -> Preference -> User Snippers
vue.json鏂囦欢锛岀劧鍚庢坊鍔犱笅闈㈡ā鏉
鐒跺悗鏂板缓.vue鏂囦欢 锛屽啓涓媣ue鐒跺悗Tap閿灏辫兘鐢熸垚浠涔堢殑閫楃熸ā鏉裤
濡傛灉娌℃湁鐢熸垚妯℃澘鍙鏄澶氫簡涓绌烘牸鎴栬呯敓鎴愮殑鏄痸ue鏍囩剧殑璇濓紝鎴戜滑杩樺緱璁剧疆涓涓嬶紝鎵撳紑settings.json锛屾坊鍔犱笅闈㈢殑璁剧疆
濡傛灉浣犵殑Setting.json鏂囦欢灞卞甫鍏嗘湁 "files.associations" 璁剧疆鐨勮瘽锛岃峰垹闄わ紝鍥犱负浠栦細鍜屼笂闈 emmet.syntaxProfiles 鍐茬獊銆
files.associations 鍜 emmet.syntaxProfiles 閮芥槸璁剧疆html 鏍囩剧殑琛ュ叏锛屽傛灉鏄瑕佺敤.vue妯℃澘琛ュ叏鍔熻兘鐨勮瘽锛宧tml鏍囩捐ˉ鍏ㄦ垜浠灏辩敤 emmet.syntaxProfiles 鏉ヨ剧疆銆
vue 鐨勫紑鍙戜腑 vscode 鍙瑁呯敤浜庡紑鍙戣勮寖鐨勬彃浠舵湁
Prettier 锛氳勮寖js
ESLint: 瑙勮寖js
Vuter: 瑙勮寖 .vue 鏂囦欢涓 template
stylus: 瑙勮寖 stylus
娉ㄦ剰锛氫互涓嬮厤缃鏄鍩轰簬鎺ヤ笅鏉ヤ粙缁嶇殑鎻掍欢璁剧疆鐨勶紝濡傛灉娌℃湁瀹夎呮彃浠舵槸涓嶄細鐢熸晥鐨勩
鎴栬咃細
鍏朵腑锛
4.濡傛灉浣跨敤浜唖tylus锛岄偅涔坴scode瀹夎卻tylus鎻掍欢锛岃繘琛岃剧疆锛屼笉閫傜敤鍐掑彿鍙屽紩鍙峰ぇ鎷鍙
鏍圭洰褰曚笅鍒涘缓eslint瑙勫垯鏂囦欢 .eslintrc.js
锛堜笅闈browsers 澶氫簡s 姝ｇ‘鐨勪负 browser 锛
5. vsCode涓缂栧啓vue椤圭洰鏃讹紝webpack閰嶇疆鐨刟lias鍒鍚嶆棤鏁
1銆乿sCode宸ュ叿閰嶇疆锛坰ettings.json鏂囦欢閰嶇疆鎵鏈夐」鐩鍙鐢锛
瑙ｅ喅鏂规堜竴锛
鍦ㄦ彃浠跺競鍦轰腑瀹夎匬ath Intellisense鎻掍欢骞跺惎鐢ㄣ傛牴鎹浠ヤ笅鎻愮ず淇℃伅锛屼慨鏀箆sCode閰嶇疆鏂囦欢settings.json鏂囦欢锛
瑙ｅ喅鏂规堜簩锛
鍦ㄦ彃浠跺瓭鍨嬬尽甯傚満涓瀹夎匬ath Autocomplete鎻掍欢骞跺惎鐢ㄣ傛牴鎹浠ヤ笅鎻愮ず淇℃伅锛屼慨鏀箆sCode閰嶇疆鏂囦欢settings.json鏂囦欢锛
2銆侀」鐩閰嶇疆
濡傞」鐩闇瑕佸崟鐙閰嶇疆锛屽彲鏍规嵁浠ヤ笅鎻愮ず淇℃伅銆傚湪椤圭洰鏍圭洰褰曚腑娣诲姞jsconfig.json鎴杢sconfig.json鏂囦欢锛
鍏蜂綋閰嶇疆濡備笅锛
{
"compilerOptions": {
// 椤圭洰鏍硅矾寰
"baseUrl": "./",
// 鍒鍚嶆槧灏勮矾寰
"paths":{
"@/*": ["宸ф媿src/*"],
"store/*": ["src/store/moles/*"]
}
},
// 缂栬瘧鏃舵帓闄や互涓嬬洰褰曟枃浠朵娇鐢ㄩ厤缃瑙勫垯
"exclude": [
"node_moles",
"dist"
],
// 缂栬瘧鏃跺寘绉熷眬鍚浠ヤ笅鐩褰曟枃浠朵娇鐢ㄩ厤缃瑙勫垯
"include": [
"./src/**/*.vue"
]
}
缁撹锛歷sCode宸ュ叿閰嶇疆鍒鍚嶆椂鎺ㄨ崘浣跨敤绗浜岀嶆柟妗堬紙鍥犱负绗涓绉嶄笉澶濂界敤锛