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和更漂亮不同步，这可能是我的错。

这是怎么回事？

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"
]
}

希望有帮助。

这里是包的链接：https://github.com/prettier/eslint-config-prettier