esLint基础使用

1）修改vscode 设置

修改tab空格设置；tabsize配置项为2

format 自动保存代码

2）在vue创建项目中，选择eslint+Standard config -标准规范-

在保存时就开启检查

3）语法报错，根据错误提示，去eslint官网搜索规则

4）在eslintrc.js文件中 extends就是官方提供的默认规则

5）在eslintrc.js文件中rules中添加或者修改规则，自定义的规则大于extends的规则

“规则”:“开启/关闭”
“no-extra-semi”:“off” //禁止不必要的分号: 关闭
1）off或者0 关闭规则
2）warn或者1 开启规则，使用警告级别，程序继续执行
3）error或者2 开启规则，使用错误级别，程序报错关闭
没有属性的规则，只需要控制开启，还是关闭；例如：“eqeqeq”: “off”，

有属性的规则可以使用属性；
例如：“semi”: [“开启/关闭”, “属性”]
semi规则有两个属性，always（默认，要求在语句末尾使用分号）,never（禁止在语句末使用分号）
“semi”:[“error”, “always”] //语句末没有分号就报错

如使用 window 对象，默认情况下会报 no-undef 的错误，需要在 .eslintrc 中进行相应配置

{"rules": {// ...},"globals": {"window": true}
}

6）使用vscode插件

eslint

    //eslint 插件配置"editor.codeActionsOnSave": {"source.fixAll": true},"eslint.alwaysShowStatus": true,

prettier插件

//prettier插件配置

    //prettier插件配置"prettier.trailingComma": "none","prettier.semi": false,//每行文字上线，超过换行"prettier.printWidth": 300,//使用单引号替换双引号"prettier.singleQuote": true,"prettier.arrowParens": "avoid",

vetur插件

"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.ignoreProjectWarning": true,"vetur.format.defaultFormatterOptions": {"prettier":{"trailingComma":"none","semi":false,"singleQuote":true,"arrowParens":"avoid","printWidth":300},"js-beautify-html": {"wrap_attributes":false}},

7）在用户目录下创建.prettier文件，添加以下内容

  "trailingComma":"none","singleQuote": true,"semi": false,"arrowParens": "avoid"

在vscode配置文件中添加： “prettier.configPath”:“地址\.prettierrc”

在vscode中右键选择文档格式化方式，选择prettier-code formatter

其他文章https://www.jianshu.com/p/ad1e46faaea2

esLint基础使用相关推荐

vue项目配置eslint(附visio studio code配置)
eslint基础环境搭建全局安装eslint:npm install eslint -g 项目eslint初始化:eslint --init,按团队或自己的编程风格回答三道题. ? How woul ...
前端学习路线+资源整合
前端学习路线由'技术胖前端学习路线'延展开来,加入一些自己觉得很好的资源.(持续整理中) 1.网络知识网络工作原理知识点:缓存.渲染原理.阻塞原理.浏览器本地存储.Web安全问题.事件循环机制 ...
人气比较高的gitee开源项目，都是带有源码介绍的！
每日看一看的git开源项目! 1.git地址https://gitee.com/WanYueKeJi/wanyue_zhibo_ios 万岳科技可为商家快速搭建起一套属于自己的直播商城系统,有效避开商 ...
web前端自学路线(b站web好评排行课程汇总)
网络知识 (Internet) 网络工作原理计算机网络原理:https://www.bilibili.com/video/BV1xJ41137Q3 什么是HTTP HTTP协议详解:https:// ...
从0到1搭建webpack2+vue2自定义模板详细教程
前言 Webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是很详细,对于很多个性化配置还是需要自己过一遍文档.Vue官方提供了多个vue-temp ...
从 0 到 1 搭建 webpack2+vue2 自定义模板详细教程
前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是很详细,对于很多个性化配置还是需要自己过一遍文档.Vue官方提供了多个vue-temp ...
Airbnb背后周下载量数百万的Eslint-Airbnb
背景: 好久没有写文章,今天看到一个比较劲爆的消息.Airbnb退出中国市场,我第一时间想到,有时间写下就下了这篇文章 Airbnb的发展介绍 Airbnb是AirBed and Breakfast( ...
Koa2框架生态实战
补充知识点: 1.git操作相关 git commit -m "refactor:" -> refactor表示修改了目录结构 git commit -m "fix ...
vue基础-某个项目ESLint不生效问题
文章目录前言一.解决方法二.在配置文件中添加一下配置三.本人电脑的ESLint配置总结前言 vue基础,最近接手同事的项目,发现ESLint不生效了,找了很久也没有发现问题,因为其他的项目 ...

esLint基础使用

esLint基础使用

esLint基础使用相关推荐

最新文章

热门文章