突然發(fā)現(xiàn)tslint不維護了,心情憂傷,使用eslint

創(chuàng)建項目初始配置

1.創(chuàng)建項目時,第四步

4、Linter / Formatter 代碼風格、格式校驗，使用ESLint + Prettier,和vscode的Prettier插件配合,格式化代碼
  TSLint
  僅錯誤預防
  ESLint with error prevention only
  Airbnb配置
  ESLint + Airbnb config
  標準配置
  ESLint + Standard config
  Prettier配置（常用）
  ESLint + Prettier

2.安裝一個插件,反正提示要安裝

npm i eslint-plugin-html -D

3.在根目錄下新建.prettierrc文件,配置一些你的規(guī)則,意思是
我的文件里面的內(nèi)容

{
    "useTabs": true,
    "tabWidth": 2,
    "arrowParens": "always",
    "trailingComma": "es5",
    "singleQuote": true
}

4.因為我使用的是typescript，所以還要配置setting.json里面的配置,增加typescript識別

"eslint.validate": [
    "typescript",
    "javascript",
    "javascriptreact",
    "html",
    "vue",

5.如果想要編譯報錯提示配置vue.config.js

module.exports = {
  lintOnSave: "error",
}

創(chuàng)建項目時用錯了,用了tslint,彌補方式

1.卸載插件

npm un tslint-config-prettier tslint-plugin-prettier -D

2.刪除tslint.json

3.新建個項目,將.eslintrc.js文件復制到根目錄文件夾下
安裝eslint插件

// 依次作用 支持編譯報錯 支持ts 支持插件prettier
npm i @vue/cli-plugin-eslint @vue/eslint-config-typescript @vue/eslint-config-prettier -D
// 就是"plugin:vue/essential"
npm i eslint eslint-plugin-html eslint-plugin-prettier eslint-plugin-vue -D

4.配置vue.config.js

module.exports = {
  lintOnSave: "error",
}

5.在根目錄下新建.prettierrc文件,配置一些你的規(guī)則,意思是
我的文件里面的內(nèi)容

{
    "useTabs": true,
    "tabWidth": 2,
    "arrowParens": "always",
    "trailingComma": "es5",
    "singleQuote": true
}

6.因為我使用的是typescript，所以還要配置setting.json里面的配置,增加typescript識別

"eslint.validate": [
    "typescript",
    "javascript",
    "javascriptreact",
    "html",
    "vue",

7.如果自己配置了格式化的規(guī)則,想全局應用,運行命令

npm run lint

如果沒有命令就創(chuàng)建一個

"lint": "vue-cli-service lint"

一些理解

prettier是一個第三方庫,vscode集成了插件,可以格式化代碼,.prettierrc文件就是格式化代碼一些規(guī)則.可以去官網(wǎng)配置規(guī)則
prettier
vscode的setting.json里面的配置是默認配置,如果.prettier沒有設置,就是用setting.json里面的設置

eslint是校驗代碼工具,需要配置規(guī)則,在.eslintrc.js里面配置rule,去除掉不想要的規(guī)則.