VS Code + ESLint + Prettier + Google Style + Typescript

Posted 2023-03-13

【中文标题】VS Code + ESLint + Prettier + Google Style + Typescript

【英文标题】：

【发布时间】：2019-11-16 10:51:51

【问题描述】：

我正在努力实现这一目标：

使用 VS Code 作为我的 javascript 和 TypeScript 编辑器，在保存 JavaScript/TypeScript 文档时自动应用来自 eslint-config-google 的格式规则。

我的devDependencies 是这些：

  "devDependencies": 
    "@types/node": "^10.12.18",
    "@typescript-eslint/eslint-plugin": "^1.9.0",
    "@typescript-eslint/parser": "^1.9.0",
    "eslint": "5.16.0",
    "eslint-config-google": "0.13.0",
    "eslint-config-prettier": "^6.0.0",
    "eslint-plugin-prettier": "^3.1.0",
    "prettier": "^1.18.2",
    "typescript": "^3.4.3"
  

我的.eslintrc：

  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": ["eslint:recommended", "google", "prettier"],
  "parserOptions": 
    "ecmaVersion": 2016,
    "sourceType": "module"
  ,
  "env": 
    "es6": true,
    "node": true,
    "mocha": true
  ,
  "rules": 
    "prettier/prettier": ["error"]
  

我的.prettierc：

  "printWidth": 100,
  "singleQuote": true

我在 VS Code 中安装了 prettier 和 eslint 扩展，并在保存时启用了格式。

考虑这段代码：

'use strict';

describe('some test', () => 
  it('should return a string value', (done) => 
    return done();
  );
);

ESLint 和 Prettier 都没有抱怨，但是在保存文档时， Prettier 删除了 done 周围的括号，eslint-config-google 也根据需要定义了它们。

此外，当删除 done 周围的括号时，不会显示错误，它们也是必需的。

看起来eslint-config-google 和 Prettier 不同步，这可能是我的错。

这里有什么问题？

【问题讨论】：

这只是一个旁注，您可以考虑使用prettier-eslint 来确保 prettier 使用您的 eslint 规则进行格式化。

@AlexanderStaroselsky 这在命令行上确实可以正常工作。

【参考方案1】：

我正在为类似的东西苦苦挣扎，但使用 jetbrains 的 webStorm 和一些不同的技术堆栈，但也许以下配置可能对你有用，请看看我的设置：

devDependencies

"eslint": "7.12.0",
"eslint-config-google": "0.14.0",
"eslint-config-react-app": "6.0.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-hooks": "4.2.0",

.prettierrc

  "extends": [
    "plugin:prettier/recommended"
  ],
  "bracketSpacing": false,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "all",
  "singleQuote": true

.eslintrc.js

module.exports = 
  env: 
    browser: true,
    es6: true,
  ,
  extends: ['plugin:react/recommended', 'google'],
  globals: 
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  ,
  parserOptions: 
    ecmaFeatures: 
      jsx: true,
    ,
    ecmaVersion: 2018,
    sourceType: 'module',
  ,
  plugins: ['react', 'prettier'],
  rules: 
    'prettier/prettier': 'error',
  ,
  settings: 
    react: 
      version: 'detect',
    ,
  ,
;