遇到的bug:如果vscode的eslint插件更新到最新2.4.4版本,有可能导致eslint版本不起作用,所以可以选择不更新版本,还有其他什么办法解决可以留言。
如何在创建项目后使用eslint,比如vue项目,uniapp项目,ESLint:用来规范或者约束代码,例如引号用单引号还是双引号 ,代码结尾是否要加分号,定义变量是否被调用了等等。以下是整个过程。
1.如果项目中没有page.json文件,请先初始化一个page.json文件,该文件会显示所有安装的依赖列表以及项目情况。在项目目录下进入cmd命令窗口,执行:npm init -y,如下:
2.自行建立项目,如用vue-cli快速建立vue项目,用hbuildX建立uniapp项目,详细步骤自行在网上搜索。
3. 先安装eslint依赖,再安装vscode的插件
安装eslint插件:
// 全局安装
npm i -g eslint
再初始化eslint配置
npm init @eslint/config
然后根据步骤提示根据自己的需求一步一步进行配置:
第一步:通过上下键移动选择项,按回车键确定选择
第二步:
第三步:选都不是,也可以选vue.js,根据自己情况选
第四步:是否使用ts语法
第五步:用什么运行代码,选择node
第六步:希望配置文件采用哪种格式,选择js
第七步:是否直接下载eslint配置,选择是
初始化完成后,就完成了文件的配置,如下
我们先配置一下代码规则:更多的代码配置可以根据自己需求去网上查找。
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": "eslint:recommended",
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
// 0是忽略,1是警告,2是报错
"rules": { // ESLint 规则配置
"quotes": 2, // 非双引号报错
"semi": 1, // 无分号就警告
"no-console": 0, // 有console.log就忽略
"space-before-function-paren": 0 // 函数前空格忽略
}
}
然后找一个js文件,去验证一下eslint是否起作用:
也可以执行eslint index.js去运行该文件,进行eslint检查,发现有一处错误,一处警告
也可以执行eslint index.js --fix进行代码修复,自动会补充分号,改成双引号。
4.上述只是使用了eslint检查代码,但是报错却无法知道报的是什么错误,我们还需要借助vscode的插件去帮助我们找出是什么错误,我们可以安装vscode的eslint插件,去vscode的应用商店,安装eslint,如下:
安装完,重启vscode,我们就发现鼠标放到报错代码中,就有了提示报的是什么错误:
字符串必须使用双引号,少了分号
5.如果我们需要在保存时自动修正代码错误,可以把如下配置复制到vscode的setting.json中,可以去vscode左下角的设置中去搜索;
// 复制到 settings.json 中
"editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行
"editor.formatOnSave": true, // 在保存时格式化文档
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"eslint.validate": [ // 检测语言
"javascript",
"javascriptreact",
"html",
"vue",
"typescript",
"typescriptreact",
"markdown"
],
6.如果是vue项目,直接使用eslint可能会报错,还需要安装一堆解析不同语法的依赖,如下图: