创建eslint文件
npm init @eslint/config
运行完成后,会在文件里面形成一个默认的js文件.eslintrc.js,里面会有一些基础的内容
// .eslintrc.js 示例
module.exports = {
"env": {
"browser": true,
"es2021": true
},
extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
}
在你噼里啪啦页面一顿敲之后,一保存,发现会出现很多错误
1. 例如:变量声明没有使用的情况
这种情况的报错,直接复制提示在eslint文件中配置rules即可
rules: {
'no-unused-vars': 'on', //声明变量未使用---关闭
'vue/multi-word-component-names': 'off' //组件name是一个单词,不是驼峰命名----关闭
}
2. 甚至还会包文件书写不规范的问题 let a =1;
身为vscode使用者,我们一般会直接采用格式化插件prettier来美化我们的代码
在项目中创建.prettierrc文件,加入我们的美化代码规范
{
"trailingComma": "none",
"singleQuote": true,
"arrowParens": "avoid",
"printWidth": 150,
"endOfLine": "auto"
}
3. 就是大家都会见到的下面的parse报错了
Parsing error: Unexpected token <
Parsing error: Unexpected token
解决办法:
在eslint的parserOptions中加入
parserOptions: {
ecmaVersion: '2021', //指定你要使用的 ECMAScript 语法的版本
sourceType: 'module',
parser: '@babel/eslint-parser'
},
parser: '@babel/eslint-parser' ;也就是这段话来解析js
ps:要先安装该插件 npm i @babel/eslint-parser
最后:附上文案解释
module.exports = {
/**
* 指定 ESLint 使用的解析器,从而让 ESLint 能够理解和检查特定的 JavaScript 语法。解析器主要用于将代码转换成抽象语法树(AST),使得 ESLint 能够分析代码中的语言构造、标识符等,并按照语法规则进行校验。
* vue官方提供了vue-eslint-parser包来对.vue文件中template部分进行转换,script部分需要额外配置一个js/tsparser,可以在parserOption.parser中进行指定。
*/
// parser: 'vue-eslint-parser',
// 指定环境,并通过将每个环境设置为 true 来启用想要的环境
env: {
browser: true,
es2021: true,
node: true
},
// 扩展配置文件
extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
// 设置解析器选项
parserOptions: {
ecmaVersion: '2021', //指定你要使用的 ECMAScript 语法的版本
sourceType: 'module',
parser: '@babel/eslint-parser'
},
// 插件配置。可以为eslint添加各种扩展功能的npm包
plugins: ['vue'],
rules: {
'no-unused-vars': 'on', //声明变量未使用---关闭
'vue/multi-word-component-names': 'off' //组件name是一个单词,不是驼峰命名----关闭
}
};