不管是多人合作還是個(gè)人項(xiàng)目，代碼規(guī)范是很重要的。這樣做不僅可以很大程度地避免基本語法錯(cuò)誤，也保證了代碼的可讀性。這所謂工欲善其事，必先利其器，個(gè)人推薦 eslint+vscode 來寫 vue，絕對(duì)有種飛一般的感覺。

每次保存，vscode就能標(biāo)紅不符合eslint規(guī)則的地方，同時(shí)還會(huì)做一些簡(jiǎn)單的自我修正。安裝步驟如下：

首先安裝eslint插件

安裝并配置完成 ESLint 后，我們繼續(xù)回到 VSCode 進(jìn)行擴(kuò)展設(shè)置，依次點(diǎn)擊 文件 > 首選項(xiàng) > 設(shè)置 打開 VSCode 配置文件,添加如下配置

"files.autoSave":"off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    { "language": "vue", "autoFix": true }
   ],
   "eslint.options": {
    "plugins": ["html"]
   }

這樣每次保存的時(shí)候就可以根據(jù)根目錄下.eslintrc.js你配置的eslint規(guī)則來檢查和做一些簡(jiǎn)單的fix。

補(bǔ)充知識(shí)：vscode配置eslint搭配vue腳手架快速實(shí)現(xiàn)代碼質(zhì)量化書寫

我們?cè)诠臼褂媚_手架的時(shí)候可能會(huì)使用eslint來實(shí)現(xiàn)代碼的質(zhì)量檢測(cè),但是真正在書寫代碼的時(shí)候要時(shí)刻記住那些 “標(biāo)準(zhǔn)”可能有點(diǎn)難受 比如 結(jié)尾不加分號(hào) 使用單引號(hào) 首行倆個(gè)空格縮進(jìn)等等

這個(gè)時(shí)候我們可能想 每次書寫玩代碼保存的時(shí)候 它能自動(dòng)幫我整理成符合標(biāo)準(zhǔn)的代碼 那是不是就事半功倍了

沒錯(cuò)vscode就有這樣的功能

還是和和往常一樣 直接上步驟和代碼了

1.實(shí)現(xiàn)這樣的條件 (vue腳手架安裝的時(shí)候 需要 選中 eslint +prettier 這個(gè)選項(xiàng))

在vscode上安裝三個(gè)插件 eslint 代碼質(zhì)量檢測(cè)插件 prettier 規(guī)則可以自定義 vetur vue代碼高亮

2.進(jìn)入 文件=>首選項(xiàng)=>設(shè)置=>用戶=>擴(kuò)展=>eslint>在seeting.json文件中編寫 加上去下面的代碼

"editor.codeActionsOnSave": {     
    "source.fixAll.eslint": true
  }
// 默認(rèn)用戶保存的時(shí)候自動(dòng) 實(shí)現(xiàn)eslint代碼標(biāo)準(zhǔn)

3.有一個(gè)剛安裝好的vue腳手架 我的是 @vue/cli 4.0 版本了

打開 .eslintrc.js文件 在rules 里面加入下面的話 是我們自定義的規(guī)則

rules: {
  'prettier/prettier': [
   'error',
   {
    semi: false,  // 結(jié)尾分號(hào) false是關(guān)閉 true是打開
    singleQuote: true,  // 單引號(hào) true是打開 false是關(guān)閉
    printWidth: 160   // 默認(rèn)代碼多少個(gè)換行  我這里設(shè)置160
   }
  ]
 }

4.運(yùn)行測(cè)試 在我們的怕package.json 文件中的

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"  // 這句話是啟動(dòng)我們的 eslintrc.js 配置文件的命令 默認(rèn)這句話是有的
 }

我們啟動(dòng)一下 npm run lint 運(yùn)行成功后

看了一下 我們 腳手架的入口文件 main.js 是不是所有的 引號(hào)都變成了單引號(hào) 結(jié)尾還沒有分號(hào)

我們隨便修改一下代碼 保存 他也會(huì)自動(dòng)幫我們調(diào)整成符合eslint標(biāo)準(zhǔn)格式的代碼 是不是很舒服 大家快去試試把

以上這篇在vue中使用eslint,配合vscode的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。