vscode中如何加eslint检查工具
代码的质量对开发人员个人的成长以及公司的发展至关重要,所以如何使用把控代码的质量是大家经常思考的问题。除了代码审核之外,代码检查工具成了把控代码质量的第一道门槛,非常好用,可以建立一些团队约定的代码风格,也可以使用比较经典、标准的语法规则。
以下主要介绍vscode中eslint是如何使用的?
第一步:vscode先安装eslint插件,如下图:
第二步:全局安装eslint,使用命令如下:
npm i -g eslint
第三步:初始化eslint,生成.eslintrc.js文件,使用命令如下
eslint --init
输入完命令,按回车之后,我们按照提示,一步一步选择自己所需就行,最后会生成.eslintrc.js文件,如下图:
eslint里面的规则,可以自己设置,具体怎么设置,可以参考eslint官网-规则设置案例
第四步:如果你写VUE,最好安装vetur插件和Prettier - Code formatter插件,然后在vscode编辑器里设置,具体如下
{
"workbench.editor.enablePreview": false, //打开文件不覆盖
"search.followSymlinks": false, //关闭rg.exe进程
"editor.minimap.enabled": false, //关闭快速预览
"files.autoSave": "afterDelay", //打开自动保存
"editor.lineNumbers": "on", //开启行数提示
"editor.quickSuggestions": {
//开启自动显示建议 "other": true,
"comments": true,
"strings": true
},
"editor.tabSize": , //制表符符号eslint
"prettier.semi": true, //去掉代码结尾的分号
"prettier.singleQuote": true, //使用单引号替代双引号
"prettier.trailingComma": "none", //去除对象最末尾元素跟随的逗号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
}
},
"eslint.validate": [
//开启对.vue文件中错误的检查 "javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"terminal.integrated.rendererType": "dom",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 保存时自动格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
这样弄好之后,ctrl+s保存的时候,编辑器会自动把代码按照既定的规则进行格式化,省了很多事儿~
vscode中如何加eslint检查工具的更多相关文章
- Linux下几款C++程序中的内存泄露检查工具
https://blog.csdn.net/gatieme/article/details/51959654
- eslint 在VSCode中不能使用
在VSCode中安装号eslint插件,还是不能使用,还需安装 npm install eslint-plugin-promise --save-dev 我也不知道为什么?我现在只是用两天不到vsco ...
- vscode 中 eslint prettier 和 eslint -loader 配置关系
前置 本文将探究 vscode prettier 插件 和 eslint 插件在 vscode 中的配置以及这两者对应的在项目中的配置文件的关系,最后提及 vscode eslint 插件配置与 es ...
- valgrind--CPP程序内存泄露检查工具
内存泄漏是c++程序常见的问题了,特别是服务类程序,当系统模块过多或者逻辑复杂后,很难通过代码看出内存泄漏. valgrind是一个开源的,检测c++程序内存泄漏有效工具,编译时加上-g选项可以定位到 ...
- vscode新版1.31.1使用代码检查工具ESlint支持VUE
1.VSCODE中安装ESlint省略 2.菜单文件->首选项->设置->扩展->ESLint 打钩:Eslint:Auto Fix On Save 点击此链接:在settin ...
- 在vscode中使用eslint+prettier格式化vue项目代码 (转载)
ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...
- React Native工程中TSLint静态检查工具的探索之路
建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...
- JS代码检查工具ESLint
前面的话 ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格.ESLint不但提供一 ...
- VSCode中使用vue项目ESlint验证配置
如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 解决办法:vscode软件下载一个ESLint,在到设置里面找到se ...
随机推荐
- jwt、token
什么是JWT jwt是一段密文;然而密码是如何产生的? 密码是由三个部分生成: 1.JWT头:JWT头部分是一个描述JWT元数据的JSON对象:{"alg":"hash2 ...
- Linux命令之tree(目录树结构)
tree命令 官方下载地址:http://mama.indstate.edu/users/ice/tree/,右键复制如下图地址: 下载: 执行wget http://mama.indstate.e ...
- C# 运算符和类型强制转换(6) 持续更新
C#支持的运算符 https://msdn.microsoft.com/zh-cn/library/6a71f45d(v=vs.140).aspx checked 和 unchecked ; b++; ...
- 原生XMLHttpRequest (ajax)的简单使用
示例: 第一步:创建XMLHttpRequest对象 var httpxml ; if(window.XMLHttpRequest){ //大多数浏览器 httpxml = new XMLHttpRe ...
- java Timer和TimerTask(简单的使用)
Timer 是一个定时工具 TimerTask 是一个实现了Runnable接口抽象类,代表可以被Timer执行的任务 (1)Timer.schedule(TimerTask task,Date ti ...
- Log4j,Log4j2,logback,slf4j日志学习(转)
日志学习笔记Log4jLog4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.数据库等:我们也可以控制每一条日志的输出格式:通过定义每一条日志 ...
- Jquery调用Ajax实现联动使用json
在很多时候我们都会使用到联动.jquery.js是一个不错的js框架.其ajax也挺不错.下面将实现一个js联动:选择公司出来受益人.根据公司不同受益人不同. 前提是:你用引入jquery.js &l ...
- ubuntu服务器常用命令
1.查看系统版本 cat /etc/issue cat /etc/lsb-release 2.查看cpu lscpu 3.查看内存 free -m 4.查看硬盘大小 fdisk -l |grep Di ...
- bat文件设置环境变量脚本
:: 获取管理员权限 @echo off % mshta vbscript:CreateObject()(window.close)&&exit cd /d "%~dp0&q ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...