VS Code + ESLint + Prettier + Google Style + Typescript

Question

我正在努力實現這一目標：

使用 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 不同步，這可能是我的錯。

這里有什么問題嗎？

Answer 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',
    },
  },
};

Answer 2

要在 Typescript 中將 EsLint 與 Prettier 集成，您只需運行npm install --save-dev eslint-config-prettier並在“extends”數組的末尾添加prettier 。 像這樣：

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

希望這有幫助。

這里是 package 的鏈接： https://github.com/prettier/eslint-config-prettier