了解eslint配置文件
运行vue create xx(文件名称)后选这个
在这里选择Eslint规范,一般都选这个
如果想了解某个规则的作用就去ESlint官网上面查这个命令的作用
这行代码的意思是:在开发阶段这个规则不执行,在发布阶段执行
一些常见规则
如果有一些规则你想要删除它,就到官网上找到这个规则点进去,根据官方文档进把代码复制到eslint.js中的rules中进行更改
配置插件
在vscode中找到这个扩展
然后打开设置
之后进入settings.json
将这段代码加入到里面就可以了
//eslint 代码自动检查相关配置
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascriptreact",
"vue",
"javascript",
{
"language": "vue",
"autoFix": true
},
"html",
{
"language": "html",
"autoFix": true
}
],
接下来装第二个插件
这个插件也需要进行一些配置
先把这一段代码复制到setting.json中
//注意下面这个地址需要你自己更改
"prettier.configPath": "C:\\Users\\xx\\.prettierrc",
// 安装Prettier配置
"eslint.alwaysShowStatus": true,
"prettier.trailingComma": "none",
"prettier.semi": false,
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 300,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
// 设置 .vue 文件中,HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"trailingComma": "none",
"singleQuote": true,
"semi": false,
"arrowParens": "avoid",
"printWidth": 300
},
"js-beautify-html": {
"wrap_attributes": false
},
},
然后在我的电脑->C盘->用户/user->xx文件夹里面创建一个文本文档输入下面这段代码
{
"semi": false,
"singleQuote": true,
"bracketSpacing": true
}
然后将文本文档重命名为.prettierrc,接着重启vscode就可以启用插件了
卸载eslint
新手在使用eslint的时候会很头疼,如果你认为eslint的报错在浪费你的时间,那么就可以把它给卸载了,卸载eslint的方法有很多,在这里我说一下我的卸载方法
先在终端执行这个命令
npm uninstall eslint --save
然后把在创建项目的时候生成的一个eslint文件删除,再进入到package.json中把所有带eslint的东西删除。如果还是继续报错的话就只能重新创建项目,然后选择不安装eslint
在这里我也遇到了一个问题,就是我在装eslint的时候没办法选择不安装eslint(这个我真不知道为什么,希望有知道的大佬看到了可以跟我说一下)
我的解决办法是用ui可视界面创建项目(指令是vue ui),然后在项目启动的时候把eslint的依赖卸载。
本文含有隐藏内容,请 开通VIP 后查看