還在每次寫完代碼以后，點擊鼠標(biāo)（或者使用快捷鍵）格式化文檔讓代碼保持整齊账忘？還在因為裝了eslint后經(jīng)常報出eslint校檢語法錯誤而犯愁志膀？——以至于裝后又卸載eslint。這篇文章讓你不再為語法校對煩惱鳖擒，讓你編程快到飛起溉浙。
項目地址：https://github.com/Ewall1106/mall
安裝
- 當(dāng)你構(gòu)建一個新的項目的時候，就以構(gòu)建一個新的 vue 項目來說蒋荚，默認(rèn)把 eslint 安裝就好戳稽。
默認(rèn)安裝eslint
- 如果項目中沒有安裝，那就只能手動安裝了期升。傳送門：eslint 官網(wǎng)
$ npm install eslint --save-dev
配置 eslint
然后在eslintc.js中可以配置你的規(guī)則惊奇，在我們腳手架初始化
panda-mall項目的時候，這些東西都已經(jīng)做好了播赁。你可以根據(jù)自己的喜好自己去配置
rules.
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/essential', '@vue/standard'],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'space-before-function-paren': 0,
},
};
- 在.eslintignore中可以設(shè)置你要忽略的文件：
build/*.js
src/assets
public
dist
vscode 中 eslint 擴展安裝
- 我用的是 vscode颂郎，如果你是用的其他工具自行 google，反正原理都一樣行拢。
eslint擴展
- 進入到
setting.json文件中祖秒，添加一下代碼：
"files.autoSave": "off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,
- 很多人配置不成功大部分都是添加代碼方式不對，特意上一份我的配置文件截圖：
settings.json
結(jié)語
當(dāng)你完成了如上所有的配置以后舟奠，當(dāng)你
command+s（ctrl+s）點擊保存的時候竭缝，eslint 就會幫你自動格式化以符合.eslintrc.js文件中的規(guī)則，讓你編程快到飛起沼瘫，不用再為了修復(fù) eslint 報錯的沖突而煩惱抬纸。你可以編輯自己的 eslint 規(guī)則或者直接拿別人的用：如餓了么團隊的 config，vue 的 config耿戚。
效果預(yù)覽.gif
你可能感興趣：
Ewall的簡書
手把手教你用vue+node+mongodb搭建一個小商場
小程序的因難見巧
看完你就該會git了
CSS日常踩坑后的總結(jié)
