你想使用哪种模式
1.只是对语法进行一个简单的检查
2.检查语法,并且会帮你找到对应的错误
3.检查语法,找到错误,并且还会强制你使用某种代码风格(要求必须符合某一种代码风格)
项目中使用哪种模块化
1.支持esModules
2.支持commonJS
3.以上均不选择(一般不会选择这个)
当前你使用了哪种框架
项目中也没有用到TS
你的代码运行在哪里?
1.浏览器
2.Node
生成的配置文件是什么格式的
1.js
2.yaml
3.json
那么我们的配置文件就生成了
module.exports = { //环境,eslint所检测的代码运行在什么环境 "env": { "browser": true, "commonjs": true, "es2021": true }, "parserOptions": { //ECAM规范的版本:latest最新的 "ecmaVersion": "latest", //使用哪一个js编译器对代码进行检测,默认值,可写,可不写 "parser":"espree",
}, "rules": { } }
eslint也会用到编译器,也会对代码进行校验,看代码符不符合规范
eslint如何对代码进行校验:先把校验的代码,通过js编译器(espree),做词法分析,语法分析,转换成AST 进行检测,如果检测出来有问题给你提示一些相关的信息
可以参考另外一篇文章:(36条消息) Eslint实现原理_还好一、、的博客-CSDN博客_eslint原理
当我们选择第二种模式,选择的框架为react,并且选择了TS,会提示我们要不要安装对应的包(对ts,react进行检查要用到的包)
yes就行了
所生成的文件
module.exports = { //环境 "env": { "browser": true, "commonjs": true, "es2021": true }, //继承,eslint的规则可以继承其他一些规则的配置信息 "extends": [ //eslint推荐的规则 "eslint:recommended", //react的规则 "plugin:react/recommended", //ts推荐规则 "plugin:@typescript-eslint/recommended" ], //编译器 "parser": "@typescript-eslint/parser", // "parserOptions": { //ecma的特性,jsx的特性 "ecmaFeatures": { "jsx": true }, "ecmaVersion": "latest" }, //所应用的插件 "plugins": [ //简写,实际上应用的是eslint-plugin-react "react", "@typescript-eslint" ], "rules": { } }
如果我们选择了第三种强制代码风格,使用的模块化为commonjs,框架为vue,ts
使用什么样的方式定义代码风格
1.流行代码风格的指导
2.它会问你些问题,根据你的问题使用哪种代码风格
如果我们使用了第一个,他会问你使用哪种代码风格
1.爱彼迎的代码风格(居多)
2.标准的代码风格
3.谷歌的代码风格
4.XO严格的代码风格
根据选择检测到对应的配置,进行安装,直接yes
生成的配置文件
module.exports = { env: { browser: true, commonjs: true, es2021: true, }, extends: [ 'plugin:vue/essential', //爱彼迎的规范 'airbnb-base', ], parserOptions: { ecmaVersion: 'latest', parser: '@typescript-eslint/parser', }, plugins: [ //eslint-plugins-vue的简写 'vue', '@typescript-eslint', ], rules: { }, };
如果报错不能使用esmodule的话需要在parserOptions中加上
"sourceType":"module"