来源：https://randyperez.tech/blog/prettier-eslint
当我开始使用现代JavaScript时，我很快就遇到了一些同事和视频教程，他们使用文本编辑器突出显示语法错误，并在每次保存时神奇地格式化代码。我是嫉妒;我想马上得到它!经过几个问题和快速谷歌搜索，很明显我必须安装ESLint和Prettier。
我有这个!它只是一个快速的npm安装eslint，我的代码看起来就像Dennis Ritchie写的一样。你猜怎么着?什么也没发生!只是我发现自己充满了毫无意义的问题。全局安装还是本地安装?配置文件?漂亮和ESLint在打架吗?为什么VSCode什么都不做?让我们通过设置这些工具的步骤来尝试回答这个问题和其他一些问题。
一、Linting VS Formatting格式化
我在这方面很困惑;我不知道这些东西是来自ESLint还是Prettier。是的，当然，一个“lint”和另一个“格式化”我的代码，但这不是一样的事情吗?不完全是，即使我想做同样的时间。
Linting是一种静态代码分析(不由浏览器编译或解释)，目的是在常见错误发生时立即找到它们。例如，假设我们在声明变量之前使用了一个变量，或者当我们想要使用严格的相等(===)时，代码中有一个双等号(==)，那么linter就会报错。这比让测试人员或最终用户发现要好得多。值得注意的是，lint还可以警告我们一些样式违反，比如代码行的最大字符数。
格式化严格关注代码的外观。它允许开发人员设置代码样式约定，并让工具处理任何违反。格式化工具可以修复诸如分号、方括号位置、悬空逗号等问题。严格关注代码的外观。它允许开发人员设置代码样式约定，并让工具处理任何违反。格式化工具可以修复诸如分号、方括号位置、悬空逗号等问题。
在格式化和Linting 之间有重叠;不正确的配置可能导致工具之间的规则冲突。简而言之，Linting 关注代码质量和一些样式规则，而格式化则关注代码的样式。
让我们看看JavaScript开发人员用于完成这些任务的特定工具。
二、ESLint
根据ESLint的网站:“是一个用于识别和报告ECMAScript/JavaScript代码中发现的模式的工具，其目标是使代码更加一致并避免bug”。
安装
你可以将ESLint作为单个项目的一部分安装，也可以作为一个全局工具安装在所有项目中。如果有一个全局和本地实例可用，则本地实例优先。我倾向于在全局范围内建立快速原型，并在当地建立长期项目。这种设置允许在任何地方都可以使用一组基本规则，并允许在每个项目的目录中使用更具体的规则。它有一个一步安装:
$ npm install -g eslint # global installation
$ npm install eslint --save-dev # local installation
配置文件
我最喜欢的部分是ESLint预加载了一组很好的规则，这些规则可以用广泛接受的最佳实践开箱即用地改进你的代码。这只是冰山一角，因为我们可以定义自己的一套规则，或者使用第三方如谷歌和Airbnb提供的规则。
所有的配置都在.eslintrc文件中。要在项目中包含一个，运行init脚本，然后将提示您回答几个问题，这些问题将有助于创建该文件。
$ ./node_modules/.bin/eslint --init # for local installations
$ eslint --init # for global installations
你的配置文件可能会以这样的方式结束:
{
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"default-case": "error"
}
}
关于如何配置ESLint及其规则的更多信息，请点击这里。
Linting文件
要" lint "你的文件，你必须使用" eslint "命令作为参数传递文件:
// very complex code we want to check(anyFileName.js)
var x = 1;
if (!!x) console.log('hi');
$ ./node_modules/.bin/eslint anyFileName.js # for local installations
$ eslint anyFileName.js # for global installations
如果一切正常，将不会有输出，但如果有任何违反，我们的输出将类似于:
我们得到我们要打破的规则的名称和位置。如果我们需要更多的上下文来理解ESLint在说什么，他们的网站上有一个详细的规则页面，提供了这一点。例如，我在第3行有一个“重复的双重否定”。
修复错误
在大多数情况下，当ESLint遇到我们可以手动修复的错误时，它会警告我们。然而，当我们包含“-fix”标志时，我们的linter可以自动修复一些问题。如果你还记得前一节，我们有一个(冗余的双重否定)，所以让我们修复它:
$ ./node_modules/.bin/eslint anyFileName.js --fix# for local installations
$ eslint anyFileName.js --fix# for global installations
// Fixed code.
var x=1;
if (x) console.log('hi');
这是一个方便的特性，但是它不能修复大多数错误。为了提供更全面的修正，ESLint必须对我们的代码做出广泛的假设，同时冒着引入新错误的风险。或者换句话说，保持您对这个特性的期望。
使它容易
添加带有lint命令的脚本是改进开发人员和自动化系统与ESLint交互的好方法。让我们通过在package.json的scripts部分中包含它来做到这一点:
"scripts": {
"lint": "eslint './*.js'",
"lint:fix": "eslint './*.js' --fix"
}
注意我们是如何将正则表达式传递给eslint命令的，这将获取根目录下的所有.js文件。最后，运行我们的文件:
$ npm run lint # just lint
$ npm run lint:fix # lint and fix
太棒了!对吧?但还有更多。我喜欢ESLint与文本编辑器集成的方式，比如VSCode，当你输入时可以在后台无缝运行。有所有主要玩家的扩展，如VSCode, Sublime和Atom。安装后，您的编辑器将突出显示违反规则的情况，现在您再也不必键入该命令(我希望如此)。
三、Prettier
prettier的网站将其描述为一个固执己见的代码格式化程序，我可以告诉你，它确实是。它剥离所有原始风格的代码，并按照其配置重新打印。因为Prettier会重写我们的代码，所以它可以安全地删除任何不需要的格式，从而保证整个项目的样式一致。
安装
就像ESLint一样，我们可以有一个全局或本地安装:
$ npm install prettier --save-dev # local
$ npm install -g prettier # globally
配置
还记得固执己见的部分吗?这意味着Prettier做出了一些我们无法配置的样式决定。他们想要实现的是缩短关于样式的讨论，而这些样式在生产力和已发布的特性方面毫无用处。不过，我们可以使用命令行或.prettierrc配置文件更改一些选项。让我们重写一些默认值:
/ prettierrc.js (we can also use a JavaScript file.)
module.exports = {
trailingComma: 'es5', // add a trailing command if still valid es5 code
tabWidth: 3, // tab will be = 3 spaces. </3
semi: false, // no semi colons
singleQuote: true, // always use single quotes
};
是时候变漂亮了
我们可以使用命令行工具格式化文件;有几个可用于修改默认行为的标志。以下是一些最常见的用例:
# To use local installation replace "prettier" for "./node_modules/.bin/prettier"
$ prettier anyFileName.js # Prints formatted file in the console
$ prettier --check anyFileName.js # Checks if file is formatted properly
$ prettier --write anyFileName.js # Formats the file if necessary
使它容易
一直运行该命令可能会很痛苦，因此我们希望编辑器来做这些繁重的工作。有两种可能的，但不是相互排斥的选项:允许编辑器每次保存文件时格式化文件，并在预提交钩子上运行得更漂亮(我将在以后的博文中介绍)。
为了将Prettier集成到文本编辑器中，我们需要安装适当的插件。我们将介绍VSCode，但是对于大多数编辑器，如VIM, Atom和Sublime，有一些选项可用。
首先，让我们打开VSCode并安装市场上的Prettier扩展。最后，我们需要通过在设置中包含以下内容来设置编辑器在每次保存时格式化文件:
{
// Turns off formatOnSave. Just to be safe.
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true
}
}
这是它!每次我们点击保存时，代码都会使用Prettier来格式化文件。
一起工作:ESLint + Prettier
当ESLint和Prettier在同一个项目中处于活动状态时，它们可能会有潜在的规则冲突。这种情况导致了一个主要的头痛，因为pretty会以ESLint认为有错误的方式格式化我们的代码。例如，在每次保存之后，Prettier会删除分号，但是这会对当前的lint配置产生一个错误。我们希望避免世界末日的情景。
这就是eslint-config-prettier发挥作用的地方。它通过关闭所有的ESLint规则来工作，而这些ESLint规则是prettier已经在处理的，或者换句话说，如果prettier会修复它，为什么要对其进行lint ?让我们安装它:
# In the command line
$ npm install --save-dev eslint-config-prettier
// Add prettier to our .eslintrc.json file
{
"env": {
"browser": true
},
"extends": ["eslint:recommended", "prettier"],
"rules": {
"default-case": "error"
}
}
就是这样!他们现在是朋友了!如果您想了解这个插件提供的额外选项，请查看它们的文档。
结论与未来工作
现在我们已经安装了ESLint和Prettier，这是改善任何JavaScript工作流程的关键一步。它们节省了时间，防止了无数错误，使程序员的生活更轻松。
在这篇文章的第二部分，我们将探索使用git钩子来合并linting和格式化，以避免将未处理的代码提交到我们的存储库。请继续关注!
https://itnext.io/getting-started-with-javascript-linting-804433fc06dc
