項目中如何配合VScode使用Eslint

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

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

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

 於是為了解決這兩個問題

我遇到了如下問題

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

項目中配置eslint

首先要知道，必須先項目中配置Eslint （Eslint規則說明 https://www.cnblogs.com/Ewarm/p/13716900.html）

全局安裝  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

 

歡迎轉載~，請標注來源~，覺得有用的話，幫忙點個贊👍吧~，謝謝觀看~  希望對你有幫助