本文介绍eslint作用,基本配置,日常使用技巧
一、需要哪一个
eslint检查语法错误,格式问题并不重要
prettier是格式化工具,保证代码美观
vscode插件Eslint(务必安装),错误标红,保存的时候自动修正eslint错误
二、安装和配置
如果项目中一开始就没有配置,用下面的方法从零配置
若项目中已经有别人配好的,可根据需要修改规则
1、eslint
eslint插件,初始化,生成.eslintrc.js或者.eslintrc.json文件
在vue项目中使用,需要安装多一个插件eslint-plugin-vue
npm i -D eslint eslint-plugin-vue
//在终端执行如下命令
./node_modules/.bin/eslint --init
//按照提示初始化
//在src同级目录下会生成.eslintrc.js或者.eslintrc.json
--> 进行规则配置,写入rules
2、prettier
2.1 安装包
npm i -D prettier
npm i -D eslint-plugin-prettier
npm i -D eslint-config-prettier
2.2 修改package.json
加一句代码
"script": {
"format": "prettier --write src/"
}
2.3 eslint修改
修改eslint文件,extends选项中加入"plugin: prettier/recommended"//用prettier必须写
"plugins"选项中加入prettier
2.4 配置prettier规则
按照如下三配置prettier规则
三、配置解析
1、package.json
package.json 里创建一个 eslintConfig属性,写规则(某些配置简单的项目会这么做)
eslintConfig: {
"rules": []
}
2、.eslintrc.json
在src同级目录下新建.eslintrc.json文件,也可能是.eslintrc.js
2.1 JS的写法
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint: recommended"//这一句必须写
"plugin:react/recommended", "standard"//根据用哪个框架,也需要安装vue/essential
"plugin: prettier/recommended"//用prettier必须写
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint", "prettier", "vue"],//没有插件可以空着
"rules": {}
}
常用的rules
rules:
{
no-undef: 0,//使用未声名的变量
no-unused-vars: 0//声名未使用
quotes: [error, single]
'vue/multi-word-component-names': 'off'//关闭eslint检查文件名是否为驼峰命名
}
2.2 ts的写法
3、prettier配置
在src同级目录下新建.prettierrc.json,也可能是.prettierrc.js
module.exports = {
tabWidth: 2,//两个空格
jsxSingQute: true,
printWidth: 100,//一行输入多少个字符
singQute: true,
semi: false,
endOfLine: "crlf",
overrides: [
{
files: '*.json',
options: {
printWidth: 200
}
}
],
allowParens: 'always'
}
四、eslint忽略
1、直接关闭
关闭所有文件的检查(一般不会用)
//vue.config.js
module.exports = {
lintOnSave: false//eslint-loader 是否在保存的时候检查
}
2、忽略某一个文件
将/* eslint-disable */放置于文件最顶部
/* eslint-disable */
my code
3、忽略某一段(行)
以分号结尾会报错,如果特殊必须用分靠结尾的,就忽略该段代码
/* eslint-disable */
<el-button
@click="handleClick(); //增长以分号结尾会报错
handlePush();
>
/* eslint-enable */
//在js中应用,忽略某一行
my code // eslint-disable-line
关闭下一行的校验
// eslint-disable-next-line
my code
4、对某一种规则启用或者禁用
不允许输入输出,变成允许文章来源:https://www.toymoban.com/news/detail-732654.html
/* eslint-disable no-alert, no-console */
my code
/* eslint-enable no-alert, no-console */文章来源地址https://www.toymoban.com/news/detail-732654.html
到了这里,关于vue项目中配置eslint和prettier的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!