配置eslint
执行安装命令
pnpm add eslint -D
执行eslint初始化命令
pnpm eslint --init
(1) How would you like to use ESLint? (你想如何使用ESLint?)
选择:To check syntax and find problems (检查语法并发现问题)
(2) What type of modules does your project use? (你的项目使用什么类型的模块?)
选择:JavaScript modules (import/export) (JavaScript模块(导入/导出))
(3) Which framework does your project use? (你的项目使用哪个框架?)
选择:Vue.js
(4) Does your project use TypeScript? (你的项目使用TypeScript吗?)
选择:Yes
(5) Where does your code run? (你的代码在哪里运行?)
选择:Browser,Node
(6) What format do you want your config file to be in? (您希望您的配置文件采用什么格式?)
选择:JavaScript
(7) Would you like to install them now? (您现在要安装它们吗?)
选择:Yes
(8) Which package manager do you want to use? (您想使用哪个包管理器?)
选择:pnpm
初始化后,会生成.eslintrc.cjs
配置文件
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended"
],
"overrides": [
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
}
}
在package.json
文件中的script
中添加命令
{
"scripts": {
// eslint . 为指定lint当前项目中的文件
// --ext 为指定lint哪些后缀的文件
// --fix 开启自动修复
// --cache 缓存
"lint": "eslint ./src --ext .js,.vue --fix --cache"
}
}
执行lint
命令
pnpm lint
这时候命令行中会显示出上图中的报错,意思就是在解析.vue
后缀的文件时候出现解析错误parsing error
。其实,在初始化eslint
是,是有配置解析vue
文件的插件eslint-plugin-vue
。
通过eslint-plugin-vue官方文档可知。如果您已经使用了另一个解析器(例如"parser": "@typescript-eslint/parser"
),请将其移动到 parserOptions
中,这样它就不会与此插件vue-eslint-parser
配置使用的解析器发生冲突。
修改.eslintrc.cjs
文件
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended"
],
"overrides": [
],
- "parser": "@typescript-eslint/parser",
+ "parser": "vue-eslint-parser",
"parserOptions": {
+ "parser": "@typescript-eslint/parser",
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": { // 0-忽略,1-警告,2-报错
"no-console": 1,
"quotes": 2, // 双引号
"semi": 1, // ;
}
}
两个parser
的区别在于,外面的parser
用来解析.vue
后缀文件,使得eslint
能解析<template>
标签中的内容,而parserOptions
中的parser
,即@typescript-eslint/parser
用来解析vue文件中<script>
标签中的代码。
此时,再执行pnpm lint
,就会发现校验通过了。