項目使用eslint

  • 2020 年 10 月 12 日
  • 筆記

今天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]

　　

參考：

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

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

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

//www.jianshu.com/p/c1553525e2b9

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

 

Tags:

VirMach 便宜 VPS