我完全是新手使用VSCode,这是我的第一个设置。我知道这是一个非常普遍的问题,但我找不到合适的解决方案。
这是我目前的理解,请纠正我如果我错了。
我想使用ESLint来查找JavaScript代码中的错误,并使用Prettier格式化所有语言。但似乎我们也可以使用ESLint格式化我们的JavaScript代码!有一些有用的规则,我喜欢使用它,而且似乎Prettier没有像(space-in-parens)这样的规则。
所以我决定在JavaScript中使用ESLint作为我的格式化程序。现在我可以看到有很多关于“如何将ESLint与Prettier集成”的教程。这个想法是使用插件扩展Prettier规则,并将那些ESLint特定的规则添加到其中。合理!
我最终得出了以下设置。请查看下面我的使用ESLint和Prettier的设置:
.eslintrc.js
module.exports = {
env: {
browser: true,
es6: true,
},
extends: ["prettier"],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
},
plugins: [
"prettier"
],
"rules": {
"space-in-parens": ["error", "always"],
"quotes": ["error", "single"],
"prettier/prettier": "error"
}
};
VSCode的settings.json
{
"terminal.integrated.shellArgs.linux": [
"-l"
],
"remote.SSH.remotePlatform": {
"dev-all": "linux"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.alwaysShowStatus": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": [
"javascript"
]
}
package.json
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-prettier": "^3.1.3",
"prettier": "^2.0.4"
}
}
现在的问题是,每当我保存我的JavaScript代码时,格式切换!例如,第一次保存时,我有“单引号”,下一次保存时我有“双引号”。我认为我对整个想法的理解是错误的。你能为我解释一下并告诉我如何纠正它吗?我花了很多时间来弄清楚它。顺便说一下,我还在vscode中安装了两个扩展程序:“ESLint”和“Prettier”。