提示和打印你的JavaScript代码可以帮助你及早发现错误,使你的代码更加清晰,并提高代码质量。然而,当你同时使用格式化器(用于pretty-printing)和linter时,可能会有一些摩擦。例如,格式化器可以做一些林特人认为有问题的事情。衬托者可以覆盖来自格式化器的样式变化。它们可以朝不同的方向发展。
为了成功地一起使用它们,你需要让它们站在同一起跑线上。在这篇文章中,我将讨论如何使用最流行的格式化器,Prettier,和最流行的linter,ESLint。我将向你展示如何设置它们,并在命令行和Visual Studio Code(VS Code)中一起使用它们来自动修复和格式化你的代码。
我已经看到了不同的方法来解决如何一起使用它们,但由于代码编辑器的限制,有些是黑客的解决方案。我将讨论其中一些的优点和缺点。你可以自己决定什么是最好的。
首先,让我们广泛地了解一下提示规则,这样我们就可以理解提示器和格式化器之间的分界线是什么。
润色的规则
有两大类提示规则。
- 格式化规则。这些规则影响代码的风格。这些规则与bug无关。例如,ESLint中的'no-mixed-spaces-and-tabs'规则确保缩进时只使用制表符或空格。Prettier也有一个'tabs'选项来做同样的事情。
- 代码质量规则。这些规则可以提高代码质量,并有可能防止或捕获错误。例如,ESLint中的"no-implicit-globals "规则不允许使用全局范围变量。从其他脚本创建的全局变量可能会发生名称冲突。这通常会导致运行时错误或意外行为。
提示规则的维恩图。
问题是,Prettier和ESLint的规则是重叠的。我们更希望它们不重叠。
一般来说,我们希望Prettier处理第一类问题,ESLint处理第二类问题。有一些规则可能很难被归类为其中之一。我们不需要纠结于它们属于哪个类别。我们的兴趣在于确保Prettier或ESLint执行一个特定的动作,并且不会相互碰撞。
Prettier和ESLint之间的规则分界。
至于运行它们的顺序,最好是在ESLInt之前运行Prettier。Prettier通过从头开始重新打印整个程序,以一致的方式来格式化文件,以消除任何格式化错误的可能性。因此,如果你想让ESLint加入格式化的行动,你应该在Prettier之后运行它,以防止更改被覆盖掉。
如果你对ESLint和Prettier不熟悉,让我们在下一节介绍如何对它们进行初始配置。如果你熟悉,你可以跳到方法部分。
ESLint和Prettier的初始配置
ESLint和Prettier都可以从npm和Yarn下载。对于每个项目,你都要创建一个package.json
,并把它们作为devDependencies
。
npm install --save-dev eslint
npm install --save-dev --save-exact prettier
ESLint开始时是一块白板。在你创建一个带有一些规则的配置之前,它不会做任何事情。把你的配置文件(.eslintrc.{js,yml,json}
)放到你的项目目录下,你就可以进行lint了。你可以设置一个全局配置,但是ESLint已经废弃了它(不鼓励使用)。我仍然使用一个全局配置。
有了配置,你可以从命令行运行ESLint,如下图。你可以阅读ESLint的入门指南以了解更多细节。
在命令行上使用ESLint。
另一方面,Prettier有一个默认配置。它可以在不创建自己的配置文件的情况下运行,所以你可以直接开始使用它。建议在大项目上使用特定版本的Prettier,否则更新可能导致许多文件的变化,并给你的git提交增加噪音。你也许应该用一个 [.prettierignore](https://prettier.io/docs/en/ignore.html)
文件来忽略那些不应该被格式化的东西。你可以阅读Prettier的安装指南了解更多信息。
在命令行上使用Prettier。
一个典型的package.json
,看起来就像我下面的样子。我把文件夹src
和test
中的文件作为我的npm脚本的目标。如果可能的话,我更喜欢跳过.eslintignore
和.prettierignore
文件--更简单是最好的
{
"name": "basic-project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"lint": "npx eslint src test",
"lint:fix": "npm run lint -- --fix",
"prettier": "npx prettier src test --check",
"prettier:fix": "npm run prettier -- --write",
},
"author": "rob o'leary",
"license": "ISC",
"devDependencies": {
"eslint": "^7.25.0",
"prettier": "^2.2.1"
}
}
所有主要的代码编辑器都有ESLint和Prettier的扩展。对于VS Code,官方的扩展是Prettier - Code formatter和ESLint。
在VS Code中使用ESLint。
为你的代码提供提示和pret-print的各种方法
我推荐下面的第一种方法。它是最干净和最有效的。
1.删除冲突的规则并连续运行
通过使用以下配置,很容易关闭ESLint中与Prettier冲突的规则。
- eslint-config-prettierfor JavaScript
- tslint-config-prettier,如果你使用TypeScript的话
首先,安装该配置。这只是针对JavaScript的。
$ npm install --save-dev eslint-config-prettier
然后,将该配置名称追加到 [extends](https://stylelint.io/user-guide/configuration/#extends)
在你的本地.stylelintrc.*
ESLint 配置文件中的数组。确保把prettier配置放在最后,这样它将覆盖其他配置的设置。
示例.eslintrc.json
。
{
// ...
extends: [
// ...
'eslint:recommended',
"prettier" // Make sure this is the last
],
// ...
}
现在,你可以自由地同时运行Prettier和ESLint而没有任何副作用。
你可以像在命令行中那样,通过将它们定义为npm脚本,一个接一个地运行prettier和ESLint。下面是在package.json
中的样子。
{
"name": "no-worries-setup",
"version": "1.0.0",
"scripts": {
"lint": "npx eslint src test",
"lint:fix": "npm run lint -- --fix",
"prettier": "npx prettier src test --check",
"prettier:fix": "npm run prettier -- --write",
"format": "npm run prettier:fix && npm run lint:fix",
}
// ...
}
现在,你可以运行npm run format
命令,一次性地格式化和修复你的所有代码。
在VS代码中的配置
-
安装扩展。ESLint,Prettier, 和Format Code Action。
-
更新你的用户设置(
settings.json
),如下:{ //... "editor.defaultFormatter": "esbenp.prettier-vscode", "eslint.probe": [ "javascript", "javascriptreact", "vue" ], "editor.formatOnSave": false, // Runs Prettier, then ESLint "editor.codeActionsOnSave": [ "source.formatDocument", "source.fixAll.eslint" ], "vetur.validation.template": false // ... }
首先,你需要禁用保存时的编辑器格式 (editor.formatOnSave
)。我们希望通过代码动作来处理一切。
在2020年3月(v1.44),editor.codeActionsOnSave
属性被更新为接受一个代码动作的数组,这允许有序的代码动作。如果我们安装了格式化代码动作扩展,我们可以使格式化作为一个代码动作来使用。所以现在,我们可以以我们喜欢的任何顺序运行Prettier和ESLint作为代码动作。很好!
在这个例子中,我们先用动作source.formatDocument
(它使用默认的格式化)来运行Prettier,然后我们用动作source.fixAll.eslint
来运行eslint --fix
。
slint.probe
属性是用来锁定ESLint应该验证的语言。如果你想看到弹出的信息,你可以使用eslint.validate
来代替。
如果你使用Vetur扩展,确保它不做自己的验证。有一个设置vetur.validation.template
,你不应该启用它。
2.以编程方式运行Prettier和ESLint
下面的应用程序提供了一个统一的方式来运行prettier
,然后立即对文件进行eslint --fix
。
- 用于JavaScript的prettier-eslint
- 用于TypeScript的prettier-tslint
首先,安装软件包。这只是针对JavaScript的。
$ npm install --save-dev prettier-eslint
接下来,你需要写出你自己的实现来针对你的文件并运行格式化。
下面是一个格式化字符串的基本例子。
const format = require("prettier-eslint");
// notice, no semicolon in the original text
const sourceCode = "const {foo} = bar";
const options = {
text: sourceCode,
eslintConfig: {
parserOptions: {
ecmaVersion: 7,
},
rules: {
semi: ["error", "never"],
},
},
prettierOptions: {
bracketSpacing: true,
},
fallbackPrettierOptions: {
singleQuote: false,
},
};
const formatted = format(options);
// notice no semicolon in the formatted text
formatted; // const { foo } = bar
很明显,这种方法需要更多的工作来锁定文件,读取内容,并写入输出。
在VS代码中的配置
你可以安装和使用Prettier ESLint扩展。你可以阅读README中的说明。
3.运行Prettier,就像它是一个ESLint规则一样
一般不建议这样做,因为。
- 你会得到被ESLint报告为问题的格式化问题。你想让Prettier为你自动修复的东西划上红线吗?
- 它比直接运行Prettier要慢一些。
- 你有另一层可以引入错误的地方。
你可以使用ESLint插件,让你把Prettier当做一个linter规则来运行。
- eslint-plugin-prettierfor JavaScript
- 用于 TypeScript 的tslint-plugin-prettier
首先,安装该插件。这只是针对JavaScript的。
$ npm install --save-dev eslint-plugin-prettier
然后,将该插件追加到 plugins
数组中,然后将插件追加到你的.stylelintrc.*
文件中。
例如**.eslintrc.json**。****
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
几年前,Wes Bos推荐了这种方法。这在当时是一个合理的选择,但现在有了更多的选择。
在VS代码中配置
-
更新你的用户设置(
settings.json
),如下:"eslint.alwaysShowStatus": true, "editor.formatOnSave": true, // turn it off for JS and JSX, we will do this via eslint "[javascript, javascriptreact]": { "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", "javascriptreact"],
结论
Prettier和ESLint可以非常有效地一起使用。它需要一些配置,但在读完这篇文章后,这应该是很简单的!我喜欢有这样的设置。这很好,可以从你的手中拿下一些任务,并重新获得一些头脑空间。它将帮助你提高你的代码质量,让你的代码库更加清晰,而无需人工干预。
The postAutomate formatting and fixing JavaScript code with Prettier and ESLintappeared first onLogRocket Blog.