一、 配置 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代码了。