[JavaScript知识库]在Typescript项目中，使用ESLint和Prettier，以及解决保存代码后ESLint配置冲突问题

首先，检查项目中根目录.eslintrc.js文件，该文件中定义了ESLint的基础配置，找到其中的rules

例如：

 const prettierConfig = require('./.prettierrc.js')

module.exports = {
  root: true,
  parserOptions: { ecmaVersion: 2021 },
  overrides: [
    rules: {
      'prettier/prettier': ['error', prettierConfig],
      'jsdoc/newline-after-description': 1,
      '@typescript-eslint/no-this-alias': 'error',
      '@typescript-eslint/member-ordering': 'off',
      'no-irregular-whitespace': 'error',
      'no-multiple-empty-lines': 'error',
      'no-sparse-arrays': 'error',
      'prefer-object-spread': 'error',
      'prefer-template': 'error',
      'prefer-const': 'off',
      'max-len': 'off',
    },
  ],
}

由此可以看到，配置项在./.prettierrc.js,开始执行你的配置吧~~~~

找到./.prettierrc.js

请注意下面代码，是解决代码冲突的重要场景

module.exports = {
  singleQuote: true,
  useTabs: false,
  printWidth: 50,
  tabWidth: 2,
  semi: false,
  htmlWhitespaceSensitivity: 'strict',
  arrowParens: 'avoid',
  bracketSpacing: true,
  wrapAttributes: true,
  sortAttributes: true,
  proseWrap: 'preserve',
  trailingComma: 'none',
  endOfLine: 'lf'
};

然后检查你的项目中是否有这个文件，

请注意下面代码中的注释部分，是解决代码冲突的重要场景

.vscode\settings.json

{
  "typescript.tsdk": "./node_modules/typescript/lib",
  "editor.formatOnSave": false,  // 重点关注这个，这个会影响到你的保存代码是否自动修改代码哦~~
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": false, // 重点关注这个，这个会影响到你的保存代码是否自动修改代码哦~~
    // For Stylelint
    "source.fixAll.stylelint": false // 重点关注这个，这个会影响到你的保存代码是否自动修改代码哦~~
  },
  "[markdown]": {
    "editor.formatOnSave": false
  },
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[json]": {
    "editor.formatOnSave": false
  },
  "[jsonc]": {
    "editor.formatOnSave": false
  },
  "files.watcherExclude": {
    "**/.git/*/**": true,
    "**/node_modules/*/**": true,
    "**/dist/*/**": true,
    "**/coverage/*/**": true
  },
  "files.associations": {
    "*.json": "jsonc",
    ".prettierrc": "jsonc",
    ".stylelintrc": "jsonc"
  },
  // Angular schematics 插件: https://marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics
  "ngschematics.schematics": [
    "ng-alain"
  ]
}

另外，你的VS code 编辑器，也有一个 settings.json文件，在 File - Preferences - Settings 中可以找到这个文件，里边的有些配置项，也会和项目中的配置造成冲突，请保证和代码配置修改为一致

例如，下面的配置就比较乱，需要改为和项目配置一样的~~

{
    "editor.minimap.enabled": false,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "window.zoomLevel": 1,
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "files.autoSave": "off",
    // 老版本的eslint
    // "editor.codeActionsOnSave": {
    //     "source.fixAll.eslint": false
    // },
    // "eslint.validate": [
    //     "javascript",
    //     "javascriptreact",
    //     "vue-html",
    //     "html",
    //     {
    //         "language": "vue",
    //         "autoFix": false
    //     },
    //     {
    //         "language": "typescript",
    //         "autoFix": false
    //     },
    //     {
    //         "language": "typescriptreact",
    //         "autoFix": false
    //     }
    // ],
    "eslint.run": "onSave",
    // "eslint.autoFixOnSave": false,
    "files.associations": {
        "/path to file/*.extension": "language"
    },
    // tab 大小为2个空格
    "editor.tabSize": 2,
    // 100 列后换行
    "editor.wordWrapColumn": 100,
    // 开启 vscode 文件路径导航
    "breadcrumbs.enabled": true,
    // prettier 设置语句末尾不加分号
    "prettier.semi": false,
    // prettier 设置强制单引号
    "prettier.singleQuote": true,
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "prettyhtml",
    // 显示 markdown 中英文切换时产生的特殊字符
    "editor.renderControlCharacters": true,
    // eslint 检测文件类型
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "workbench.colorTheme": "Default Light+",
    // vetur 的自定义设置
    // "vetur.format.defaultFormatterOptions": {
    //     "prettier": {
    //         "singleQuote": true,
    //         "semi": false,
    //         "tabWidth": 2
    //     }
    // },
    "vetur.format.defaultFormatterOptions": {
        "prettyhtml": {
            // 单行超过100个长度的时候开始换行
            "printWidth": 50,
            "tabWidth": 2,
            "useTabs": false,
            "singleQuote": false,
            "wrapAttributes": true,
            "sortAttributes": true
        }
    },
    // 禁用vetur的JS格式化，交给eslint处理
    "vetur.format.defaultFormatter.js": "none",
    "window.autoDetectColorScheme": true,
    "problems.showCurrentInStatus": true,
    "eslint.alwaysShowStatus": true,
    "VSCodeCounter.showInStatusBar": true,
    "zenMode.hideStatusBar": false,
    "http.proxy": "http://ics.foxconn.com/dpbg.pac",
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    //autoFixedOnSave 设置已废弃，采用如下新的设置
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": false
    },
    "eslint.format.enable": true,
    "editor.formatOnSave": false,
    //autoFix默认开启，只需输入字符串数组即可
    "eslint.validate": [
        "javascript",
        "vue",
        "html",
        "javascriptreact",
        "vue-html",
        "html",
        "typescript",
        "typescriptreact"
    ]
}

改完就OK 了