Prettier ESLint 结合 ts

Prettier ESLint 结合 ts

1.第一步

  npx eslint --init

```javascript
// How would you like to use ESLint? · style
// ✔ What type of modules does your project use? · esm
// ✔ Which framework does your project use? · react
// ✔ Does your project use TypeScript? · No / Yes
// ✔ Where does your code run? · browser, node
// ✔ How would you like to define a style for your project? · guide
// ✔ Which style guide do you want to follow? · standard-with-typescript
// ✔ What format do you want your config file to be in? · JavaScript

选择生成的 .eslintrc 配置项

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:react/recommended',
    'standard-with-typescript'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'react'
  ],
  rules: {
  }
}

第2步

修改配置

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:react/recommended',
    'standard-with-typescript'
  ],
  'settings': {
    'react': {
      'version': '18.2.0'
    }
  },
  overrides: [
  ],
  globals: {
    '$': true,
    'process': true,
    'Promise': true,
    '__dirname': true
  },
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    'ecmaFeatures': true,
    project: './tsconfig.json',
    tsconfigRootDir: __dirname
  },

  plugins: [
    'react'
  ],
  rules: {
    'semi': [2, 'always'], // 语句强制分号结尾
    'semi-spacing': [0, { 'before': false, 'after': false }], // 分号前后空格
    '@typescript-eslint/semi': 0,
    // "quotes": [0, "single"], // 引号类型 `` "" ''
    '@typescript-eslint/strict-boolean-expressions': 0,
    '@typescript-eslint/consistent-type-definitions': 0,
    'no-mixed-spaces-and-tabs': [2, false], // 禁止混用tab和空格
    'no-spaced-func': 2, // 函数调用时 函数名与()之间不能有空格
    '@typescript-eslint/prefer-optional-chain': 0
  }
};

第三步

下载vscode 插件 ESLint和 Prettier ESLint

第四步

// yarn add -D prettier@^2.5.1 eslint@^8.7.0 @typescript-eslint/parser@^5.0.1 typescript@^4.4.4

第5步

配置你当前项目下的.vscode/settings.json

{
  "eslint.run": "onType", // 运行linter 的时间，onSave(保存后)或onType(输入时)，默认为onType
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"] //指定vscode的eslint所处理的文件的后缀
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false // 保存时按eslint自动修复
  },

  "javascript.validate.enable": false,
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "editor.formatOnPaste": false, // required
  "editor.formatOnType": false, // required
  "editor.formatOnSave": true, // optional
  "editor.formatOnSaveMode": "file", // required to format on save
  "files.autoSave": "onFocusChange",
  "[javascriptreact]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  }
}

第六步

重新启动vscode