Node.js프로젝트에서 ESLint를 설치하고 사용하는 방법은 무엇입니까? 이 기사에서는 Node.js 애플리케이션에서 ESLint를 사용하는 방법을 소개합니다.
【추천 학습: "nodejs Tutorial"】
ESLint은 JavaScript가 약한 유형의 언어이기 때문에 코드를 표준화하고 개발자가 예상치 못한 오류를 극복하는 데 도움이 되는 오픈 소스 JavaScript Linting 유틸리티입니다.
오늘 이야기할 ESLint를 포함하여 코드 린팅을 위한 JSHint 및 JSCS와 같은 Javascript 커뮤니티에는 많은 정규화 옵션이 있습니다.
ESLint는 모든 규칙을 완전히 연결할 수 있도록 설계되었습니다. 이것이 주된 이유 중 하나입니다. 이를 통해 개발자는 자신만의 린팅 규칙을 만들 수 있습니다. ESLint 공식 가이드에 제공된 각 규칙은 독립적인 규칙이며 개발자는 언제든지 특정 규칙을 사용할지 여부를 결정할 수 있습니다.
Installation
프로젝트 디렉터리에 로컬 설치하는 경우:
$ npm i eslint -D
로그인 후 복사
작업 시스템에 전역 설치하는 경우:
$ npm i eslint -g
로그인 후 복사
설치 후 터미널에서 eslint 명령을 통해 ESLint를 사용할 수 있습니다. . eslint 命令使用 ESLint。
配置
最简单的配置方法是设置一个 .eslintrc JSON 文件，其中可以描述所有的 linting 规则。
.eslintrc 的一个示例：
{
"env": {
"node": true,
"browser": true
},
"globals": {
"exampleGlobalVariable": true
},
"rules": {
"no-console": 0,
"space-infix-ops": "error",
"quotes": ["error", "single", {
"avoidEscape": true,
"allowTemplateLiterals": true
}],
"space-before-blocks": ["error", "always"],
"semi": ["error", "never"]
},
"plugins": []
}로그인 후 복사
主要字段：
parse — 指定解析器parserOptions — 指定解析器选项env — 指定脚本的运行环境root — 为 true 时，停止向上查找父级目录中的配置文件globals — 脚本在执行期间访问的额外的全局变量rules — 在此处添加您的自定义规则
如果全局安装了 eslint，我们还可以使用以下命令生成配置文件：
在其他情况下，如果您已在本地将其安装到项目中，则需要在终端中输入：
$ ./node_modules/.bin/eslint --init
로그인 후 복사
在这两种情况下，都会提示您生成 .eslintrc 文件的一组基本规则。
上述提示后生成的文件示例：
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
}로그인 후 복사
有关配置的详细信息，请阅读：
http://eslint.org/docs/user-guide/configuring
为了方便运行，我们可以在项目的 package.json，在 scripts 字段里面添加以下脚本：
{
"scripts" : {
"lint": "eslint **/*.js",
"lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
"lint-fix": "eslint --fix **/*.js"
}
}로그인 후 복사
我们将该规则应用于以下文件：
var a = 1;
console.log(1);
로그인 후 복사
执行 npm run lint 后将出现以下信息：
ESLint 提示已经很明显了：3 个错误。第一行和第二行的最后又额外的分号错误，a 被赋值但从未使用。
并且提示使用 --fix 选项修复错误和警告，有 2 个错误是可以修复的。现在，使用 npm run lint-fix 修复它，a 的去留就看自己手动更改。
你还可以运行 npm run lint-html 命令，将检查结果写入一个网页文件。
配置文件优先级
如果您按上面的步骤一步步来，你会可能已经知道，ESLint 支持几种格式的配置文件。
现在存在一个问题，如果同个目录下有多个 ESLintConfiguration
가장 간단한 구성 방법은 모든 Linting 규칙을 설명할 수 있는 .eslintrc JSON 파일을 설정하는 것입니다.
.eslintrc의 예:
const configFilenames = [
".eslintrc.js",
".eslintrc.yaml",
".eslintrc.yml",
".eslintrc.json",
".eslintrc",
"package.json"
]
로그인 후 복사
기본 필드:
parse — 파서를 지정합니다. - < code>parserOptions — 파서 옵션을 지정합니다.
env — 스크립트의 실행 환경을 지정합니다.root — 다음과 같습니다. true, 상위 디렉터리에서 구성 파일 위쪽 조회를 중지합니다.globals — 실행 중에 스크립트가 액세스하는 추가 전역 변수rules — 여기에 사용자 정의 규칙을 추가하세요
eslint가 전역적으로 설치된 경우 다음 명령을 사용하여 구성 파일을 생성할 수도 있습니다:
$ eslint index.js
로그인 후 복사
로그인 후 복사
module.exports = {
parserOptions: {
babelOptions: {
presets: ['@babel/preset-react'],
},
},
plugins: ['react'],
rules: {
/**
* 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头
* @reason 类型相关的约束交给 TypeScript
*/
'react/boolean-prop-naming': 'off',
/**
* <button> 必须有 type 属性
*/
'react/button-has-type': 'off',
/**
* 一个 defaultProps 必须有对应的 propTypes
* @reason 类型相关的约束交给 TypeScript
*/
'react/default-props-match-prop-types': 'off',
/**
* props, state, context 必须用解构赋值
*/
'react/destructuring-assignment': 'off',
/**
* 组件必须有 displayName 属性
* @reason 不强制要求写 displayName
*/
'react/display-name': 'off',
// ...
}
}로그인 후 복사
로그인 후 복사
두 경우 모두
.eslintrc 파일 세트를 생성하라는 메시지가 표시됩니다. 기본 규칙.
위 프롬프트 후 생성된 파일의 예:
rrreee구성에 대한 자세한 내용은 다음을 참조하세요. 🎜🎜http://eslint.org/docs/user-guide/configuring🎜🎜🎜쉽게 실행하려면 다음에서 실행할 수 있습니다. 프로젝트의 package.json에서 scripts 필드에 다음 스크립트를 추가합니다. 🎜rrreee🎜이 규칙을 다음 파일에 적용합니다. 🎜rrreee🎜Execute npm run lint </code > 다음 정보가 표시됩니다. 🎜🎜<img src="https://img.php.cn/upload/image/217/229/260/1628559713501817.png" title="1628559713501817.png" alt= "Node.js 프로젝트에서 ESLint를 설치하고 사용하는 방법"/>🎜🎜ESLint 팁은 이미 명확합니다. 오류가 3개 있습니다. 첫 번째와 두 번째 줄 끝에 있는 추가 세미콜론이 잘못되었습니다. <code>a가 할당되었지만 사용되지 않았습니다. 🎜🎜그리고 오류와 경고를 수정하려면 --fix 옵션을 사용하라는 메시지가 표시됩니다. 수정할 수 있는 오류는 2개입니다. 이제 npm run lint-fix를 사용하여 문제를 수정하고 a를 수동으로 변경하는 것은 사용자의 몫입니다. 🎜🎜 npm run lint-html 명령을 실행하여 검사 결과를 웹페이지 파일에 쓸 수도 있습니다. 🎜🎜🎜🎜구성 파일 우선 순위🎜🎜🎜위의 단계를 단계별로 따라해 보면 ESLint가 여러 형식의 구성 파일을 지원한다는 것을 이미 알고 계실 것입니다. 🎜🎜이제 질문이 있습니다. 🎜같은 디렉토리에 여러 ESLint 파일이 있는 경우 해당 파일은 어떻게 실행되며 우선 순위는 무엇입니까? 우리의 대답은 🎜🎜🎜ESLint 🎜source code🎜에 나와 있으며 우선순위 구성은 다음과 같습니다: 🎜rrreee🎜🎜🎜.eslintrc.js > .eslintrc.yaml > .eslintrc.json > ; eslintrc > package.json🎜🎜🎜🎜🎜Rules🎜🎜🎜 ESLint의 규칙은 별도로 추가됩니다. 기본적으로 규칙은 적용되지 않습니다. Linting 프로세스에 대해 규칙을 활성화하려면 먼저 규칙을 명시적으로 지정해야 합니다. 🎜🎜🎜공식 문서를 열어 전체 규칙 목록을 확인하세요: 🎜🎜http://eslint.org/docs/rules/🎜
在决定要包含哪些规则之后，您必须设置这些错误级别。每个错误级别可定义如下：
0 — 关闭规则，相当于 off1 — 打开规则作为警告，相当于 warn2 — 打开规则作为错误，相当于 error
错误和警告之间的区别在于 eslint 完成时将具有的退出代码。如果发现任何错误，eslint 将以 1 退出代码退出，否则将以 0 退出。
如果您在生成步骤中进行 lint，这允许您控制哪些规则应破坏您的生成，哪些规则应视为警告。
环境
您正在编写的代码可能适用于特定环境，例如，您可能正在使用 Express 框架在 Node.js 应用程序中编写 REST API，并且该应用程序的前端将在 Vue/React 中构建。
两个不同的项目、两个不同的环境，它们都可以在一个文件中具有单独的 eslint 配置，即使客户端和服务器位于一个被视为项目根目录的项目目录下。
它是如何完成的？
通过在 .eslintrc 的 "env" 部分将环境 id 设置为 true。
ESLint CLI
ESLint 附带一个命令行界面（CLI），用于 lint 文件或目录。
$ eslint index.js
로그인 후 복사
로그인 후 복사
前面示例中我们已经看到，运行命令后生成的输出将按文件分组，并将指定 line:column 警告/错误、错误原因以及每个故障的规则名称。
将 ESLint 与您喜欢的编码风格结合使用
ESLint 个人并不提倡任何编码风格。您可以设置 .eslintrc 文件以使用您喜欢的样式规则强制编码样式。
您还可以将 ESLint 与样式指南（如 Airbnb、JavaScript 标准风格）一起使用。
你还必须使用额外的插件，例如：
团队规范
AlloyTeam 给出的 React/Vue/TypeScript 项目的渐进式 ESLint 配置（eslint-config-alloy），以下贴出 React 的一小部分配置：
module.exports = {
parserOptions: {
babelOptions: {
presets: ['@babel/preset-react'],
},
},
plugins: ['react'],
rules: {
/**
* 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头
* @reason 类型相关的约束交给 TypeScript
*/
'react/boolean-prop-naming': 'off',
/**
* <button> 必须有 type 属性
*/
'react/button-has-type': 'off',
/**
* 一个 defaultProps 必须有对应的 propTypes
* @reason 类型相关的约束交给 TypeScript
*/
'react/default-props-match-prop-types': 'off',
/**
* props, state, context 必须用解构赋值
*/
'react/destructuring-assignment': 'off',
/**
* 组件必须有 displayName 属性
* @reason 不强制要求写 displayName
*/
'react/display-name': 'off',
// ...
}
}로그인 후 복사
로그인 후 복사
您可以参考该团队的一些配置，应用到自己的项目中。
更多编程相关知识，请访问：编程入门！！
위 내용은 Node.js 프로젝트에서 ESLint를 설치하고 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
