vscode 如何用 eslint 格式化 typescript?

Question

设置格式化方式为 ESLint 后， 格式化并没生效

设置格式化方式为 prettier 格式化正常

请问如何配置让 ESLint 支持格式化 typescript ？

.eslintrc.js ：

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 11,
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint'],
  rules: {}
};

Answer 1

有可能是eslint.format.enable这个配置没有启用.
你可以使用以下配置试试看,在项目中新建.vscode/settings.json,或者直接用到设置中也可以.
使用 ESLint 来格式化的配置

// .vscode/settings.json
{
  "eslint.format.enable": true,
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.enable": true
}

或者有可能是配置中有错误,你可以打开输出面板选到ESLint查看ESLint扩展的输出是否有错误.

另外ESLint默认是忽略.开头的文件,比如像.eslintrc.js,如果要格式化.开头的文件,可以通过在.eslintignore中添加一个否定忽略的规则来开启.

!.eslintrc.js

---

使用 ESLint 扩展来格式化代码