在vue中使用eslint,配合vscode的操作

更新時間：2020年11月09日 09:25:28 作者：UIEngineer

這篇文章主要介紹了在vue中使用eslint,配合vscode的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

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

首先安裝eslint插件

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

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

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

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

我們在公司使用腳手架的時候可能會使用eslint來實現(xiàn)代碼的質(zhì)量檢測,但是真正在書寫代碼的時候要時刻記住那些 “標準”可能有點難受比如結(jié)尾不加分號使用單引號首行倆個空格縮進等等

這個時候我們可能想每次書寫玩代碼保存的時候它能自動幫我整理成符合標準的代碼那是不是就事半功倍了

沒錯vscode就有這樣的功能

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

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

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

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

"editor.codeActionsOnSave": {     
    "source.fixAll.eslint": true
  }
// 默認用戶保存的時候自動 實現(xiàn)eslint代碼標準

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

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

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

4.運行測試在我們的怕package.json 文件中的

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

我們啟動一下 npm run lint 運行成功后