一、 配置 JDK 和 Linux
在使用ESLint之前，需要确保操作系统上已经配置好JDK和Linux。在这个过程中，如果出现任何错误或者不确定，可以在终端中运行相应的命令行来检查。
二、 ESLint怎么配置
2.1 安装ESLint
npm install eslint --save-dev
上述命令是通过npm包管理器安装ESLint模块并且将其保存在devDependencies的位置，可以通过package.json文件来记录模块依赖。
2.2 配置文件
ESLint的配置文件是一个json或者js格式的文件，通常称之为.eslintrc.json或者.eslintrc.js。它用于配置检查器的规则和插件，可以自定义一些规则来满足项目的需求。下面是一份典型的ESLint配置文件示例：
{
"extends": "eslint:recommended",
"rules": {
"no-console": "warn",
"indent": ["error", 2],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}
其中:
- extends选项可以继承一些预设的规则，例如：”eslint:recommended”，它包含了一系列推荐的规则。
- rules选项可以定制一些规则，例如：”no-console”，它警告使用console语句。
- indent选项指定了缩进格式，它的值可以是数字或者字符串，例如：2表示使用2个空格缩进。
- quotes选项指定了字符串的引号格式，它的值可以是单引号或者双引号。
- semi选项指定了是否使用分号，它的值可以是always，never和auto。
2.3 ESLint命令行
ESLint还提供了一些命令行工具，可以方便地执行检查操作。比如说，使用以下命令就可以执行默认的eslint规则，其中test.js是待检查的文件。
eslint test.js
除此之外，还可以通过一些选项来扩展命令行工具的功能。比如说，使用以下命令就可以执行scripts目录下的检查文件。
eslint "scripts/**/*.js"
三、 ESLint插件有什么用？
ESLint提供了一些插件，可以添加一些规则或者扩展一些现有规则的功能。安装插件的方式与安装其他npm包的方式相同。
3.1 JSX/React
如果需要使用ESLint检查jsx或者react语法，需要安装相应的插件。下面是插件的安装命令。
npm install eslint-plugin-react --save-dev
然后，在配置文件中，需要添加以下内容：
{
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"plugins": [
"react"
]
}
其中，extends选项中新增了plugin:react/recommended和plugins选项中新增了react。如此配置之后，ESLint就可以检查.jsx和.js文件中的react代码了。
3.2 Vue
如果需要使用ESLint检查vue语法，需要安装相应的插件。下面是插件的安装命令。
npm install eslint-plugin-vue --save-dev
然后，在配置文件中，需要添加以下内容：
{
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
"plugins": [
"vue"
]
}
其中，extends选项中新增了plugin:vue/recommended和plugins选项中新增了vue。如此配置之后，ESLint就可以检查.vue和.js文件中的vue代码了。
3.3 TypeScript
如果需要使用ESLint检查TypeScript语法，需要安装相应的插件。下面是插件的安装命令。
npm install @typescript-eslint/eslint-plugin --save-dev
然后，在配置文件中，需要添加以下内容：
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"plugins": [
"@typescript-eslint"
]
}
其中，extends选项中新增了plugin:@typescript-eslint/recommended和plugins选项中新增了@typescript-eslint。如此配置之后，ESLint就可以检查.ts和.js文件中的TypeScript代码了。
参考资料
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/282679.html
微信扫一扫 
支付宝扫一扫 