專案中如何配合VScode使用Eslint

文學少女發表於2020-10-12
VSCodeEsLint

今天eslint版本更新了，然後昂，有些奇奇怪怪的錯誤提示了，然後想，這我得

1.配置一個儲存時根據eslint規則自動修復

2.欸，之前編碼遇到未使用的變數都會有標記黃線，我很好定位，這會怎麼沒了

 於是為了解決這兩個問題

我遇到了如下問題

  1. vscode-eslint怎麼配置規則
  2. vscode-eslint怎麼儲存自動修復配置
  3. eslint在vscode上配置為什麼不生效
  4. typeScript無法格式化
  5. eslint檢測出的問題如何自動修復

專案中配置eslint

首先要知道，必須先專案中配置eslint

全域性安裝  eslint

npm i eslint -g

然後你可以通過手動建立一份.eslintrc.js或者.eslintrc.ts，也可以通過命令eslint --init建立一份

使用命令時你可以選個模板，也可以自己回答問題

 比如選擇airbnb

 也可以自己回答問題

 這樣你就會有一份.eslintrc.js或者.eslintrc.ts檔案

其他更具體詳細的東西可以參考Eslint官網

為什麼我會出現問題：

  1. eslint在vscode上配置為什麼不生效
  2. 欸，之前編碼遇到未使用的變數都會有標記黃線，我很好定位，這會怎麼沒了

因為我沒有在VSCode中配置怎麼會生效呢 amazing，有被自己蠢到。

現在我們需要在VSCode中使用Eslint，VScode的Eslint會讀取專案中的配置檔案，從而達到會程式碼的檢查

在VSCode中使用Eslint

首先開啟VScode的擴充套件皮膚，搜尋Eslint，安裝它！

 安裝完成後，你需要重新啟動VScode

然後點選VSCode的  檔案》 首選項 》設定 ，搜尋eslint，在Eslint Options處點選進seting.json 

 這裡你可以做一些eslint的配置

{
  "eslint.enable": true, //是否開啟vscode的eslint
  "eslint.options": { //指定vscode的eslint所處理的檔案的字尾
      "extensions": [
          ".js",
          ".vue",
          ".ts",
          ".tsx"
      ]
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.validate": [ //確定校驗準則
      "javascript",
      "javascriptreact",
      {
          "language": "html",
          "autoFix": true
      },
      {
          "language": "vue",
          "autoFix": true
      },
      {  // 解決格式化typeScript無法生效
          "language": "typescript", 
          "autoFix": true
      },
      {//解決格式化typeScript無法生效
          "language": "typescriptreact",
          "autoFix": true
      }
  ]
}
一般這樣的話，出現eslint提示後，儲存即可修改成功。　

那麼Eslint檢出的問題如何修復呢

執行如下命令

eslint --fix [file.js][dir]

　　

參考：

https://blog.csdn.net/xss392795158/article/details/88228922

https://blog.csdn.net/weixin_34274029/article/details/88882472

https://www.cnblogs.com/sheseido/p/12357144.html

https://www.jianshu.com/p/c1553525e2b9

https://www.cnblogs.com/saysmy/p/6637258.html

 

相關文章