vsCode中使用ESLint配置全过程
在 vue项目中使用vscode编辑时为了开发的代码统一,采用了ESLint如果代码没有安装规则格式化的话那么就将报错,接下来将详细的讲下配置全过程:前提条件安装ESLint,我这里就重整个Vue项目的下载开始操作vue init webpack eslint_dome_vue //创建项目在创建项目时可直接开启,ESLint配置。项目创建开之后会在目录下生成 .eslintrc.js 文件,这是
在 vue项目中使用vscode编辑时为了开发的代码统一,采用了ESLint如果代码没有按照规则格式化的话那么就将报错,接下来将详细的讲下配置全过程:
前提条件
安装ESLint,我这里就重整个Vue项目的下载开始操作
vue init webpack eslint_dome_vue //创建项目
在创建项目时可直接开启,ESLint配置。项目创建开之后会在目录下生成 .eslintrc.js 文件,这是用来今后配置规则之处。
配置vsCode令代码可修复
在vscode商城中下载ESLint插件
配置vscode路径:文件 -> 首选项 -> 设置
在设置中分为用户和工作区,区别在于在用户中的配置的对改用户的所有项目都有效,工作区的是针对指定项目。这里我们开启用户的setting.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
}
],
保存之后重启vsCode,随后就可实现代码跟随ESLint规则修复!如果出现重启vsCode后没有实现跟随ESLint规则修复,那么一定要检查下如下开关是否开启:
ESLint规则
- “off” or 0 - 关闭规则
- “warn” or 1 - 将规则视为一个警告(不会影响退出码)
- “error” or 2 - 将规则视为一个错误 (退出码为1)
尝试在规则中添加'no-debugger': 1
,意味着不允许使用debugger
则会出现报错警告:
还有其他一些规则可以去看ESLint文档,这里就不一一描述了。
以上就是我对ESLint的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)