项目里面安装并配置eslint。
参考官网执行如下命令
npm init @eslint/config
等价于
npm install eslint -D //安装eslint
npx eslint --init //初始化配置eslint
执行后会有一些配置选项,按需选择。如下是按照个人当前项目需要进行的选择,可以作为参考。执行完后项目里面会多出一个.eslintrc.js文件,用于后面eslint的配置。
配置.eslintrc.js和.prettierrc文件
eslint提供两类规则:检查格式化的规则、检查代码质量的规则。说到底eslint是通过一条条规则限制代码规范,且规则的重点不在代码风格上,因此单凭eslint不能完全统一代码风格。
而prettier只负责代码格式化,不负责管理代码质量,采用prettier来统一代码风格优选。prettier支持配置的参数不多,且所有参数都有默认值,若需更改默认配置,新建.prettierrc.js文件配置具体值,参考prettier config。如下参数说明:
module.exports = {
printWidth: 80, //(默认值)单行代码超出 80 个字符自动换行
tabWidth: 2, //(默认值)一个 tab 键缩进相当于 2 个空格
useTabs: true, // 行缩进使用 tab 键代替空格
semi: false, //(默认值)语句的末尾加上分号
singleQuote: true, // 使用单引号
quoteProps: 'as-needed', //(默认值)仅仅当必须的时候才会加上双引号
jsxSingleQuote: true, // 在 JSX 中使用单引号
trailingComma: 'all', // 不用在多行的逗号分隔的句法结构的最后一行的末尾加上逗号
bracketSpacing: true, //(默认值)在括号和对象的文字之间加上一个空格
jsxBracketSameLine: true, // 把 > 符号放在多行的 JSX 元素的最后一行
arrowParens: 'avoid', // 当箭头函数中只有一个参数的时候可以忽略括弧
htmlWhitespaceSensitivity: 'ignore', // vue template 中的结束标签结尾尖括号掉到了下一行
vueIndentScriptAndStyle: false, //(默认值)对于 .vue 文件,不缩进 <script> 和 <style> 里的内容
embeddedLanguageFormatting: 'auto', //(默认值)允许自动格式化内嵌的代码块
};
问题1:eslint和prettier都可以管控代码风格,此时可能会出现冲突。目前已经有了非常成熟的解决方案,即 eslint-config-prettier + eslint-plugin-prettier。
eslint-config-prettier:关闭eslint中与prettier相互冲突的规则。
eslint-plugin-prettier:eslint使用prettier规则来美化代码风格。
在 .eslintrc.js中extends的最后添加一个配置,此时prettier和eslint便可以无冲突协作,保存时候也能自动修复并格式化代码了。
extends: [
'plugin:vue/vue3-recommended',
'airbnb-base',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended', // 增加的配置
],
问题2:eslint解析.vue 文件中的template无效。eslint-plugin-vue是对.vue 文件进行代码校验的插件,插件一些扩展如下。个人项目里面用的vue3,选用的plugin:vue/vue3-recommended。
plugin:vue/base:基础
plugin:vue/essential:预防错误的(用于 Vue 2.x)
plugin:vue/recommended:推荐的,最小化任意选择和认知开销(用于 Vue 2.x);
plugin:vue/strongly-recommended:强烈推荐,提高可读性(用于 Vue 2.x);
plugin:vue/vue3-essential:(用于 Vue 3.x)
plugin:vue/vue3-strongly-recommended:(用于 Vue 3.x)
plugin:vue/vue3-recommended:(用于 Vue 3.x)
配置eslint-plugin-vue插件和extends后,template校验还是会失效,此时需要再配置和eslint-plugin-vue插件对应的解析器vue-eslint-parser。vue-eslint-parser能解析 template的内容,但不会解析JS,因此需要再配置一个解析器@typescript-eslint/parser。
vue-eslint-parser:配置在外面,eslint能解析<template>标签中的内容
@typescript-eslint/parser:配置在parserOptions中用来解析vue文件中<script>标签中的代码。
具体配置如下:
parser: 'vue-eslint-parser', // 解析<template>标签中的内容
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser', // 解析vue文件中<script>标签内容
sourceType: 'module',
},
问题3: 可以采用如下命令检测.eslintrc.js文件中是否有未安装的插件,确保插件全部安装后eslint才可起作用。
npx eslint 文件名
配置.editorconfig文件
.editorConfig专注于统一编辑器编码风格配置,对多种类型的单文件进行简单的格式化。它提供的配置参数很少,具体如下所示。
# 已经是顶层配置文件,不必继续向上搜索
root = true
[*]
# 编码字符集
charset = utf-8
# 缩进风格是空格
indent_style = space
# 一个缩进占用两个空格,因没有设置tab_with,一个Tab占用2列
indent_size = 2
# 换行符 lf
end_of_line = lf
# 文件以一个空白行结尾
insert_final_newline = true
# 去除行首的任意空白字符
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
可以看到 .editorConfig 和 .prettierrc会存在一些重复的配置,比如都提供缩进的配置参数。建议在实际应用中将二者参数设置为一致。一些注意事项如下:
不同编辑器的配置存在差异,vscode 这类编辑器,需要自行安装 editorconfig 插件
编辑器的行为会与 .editorconfig 文件中定义的一致,其优先级比编辑器自身的设置要高。比如编辑器vscode中,当.editorConfig中indent_size和settings.json中editor.tabSize同时配置Tab空格数, indent_size优先生效。
.editorconfig配置缩进时,优先级没有.eslintrc.js文件中的高,但两者并不冲突,配合使用可以使代码风格更加优雅。