在vue項目中如何實現(xiàn)vscode與eslint配合使用

在vue項目中如何實現(xiàn)vscode與eslint配合使用？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

不管是多人合作還是個人項目，代碼規(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  運行成功后

看完上述內(nèi)容，你們掌握在vue項目中如何實現(xiàn)vscode與eslint配合使用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！