Vue项目vscode 安装eslint插件的方法(代码自动修复)


Posted in Javascript onApril 15, 2020

ESlint:是用来统一JavaScript代码风格的工具,不包含css、html等。

方法和步骤:

通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package.json查看,也可以查看工程下是否有.eslintrc.js和.eslintignore查看到eslint是否开启。

Vue项目vscode 安装eslint插件的方法(代码自动修复)

Vue项目vscode 安装eslint插件的方法(代码自动修复)

当我们编写不符合eslint规范的代码时,启动项目会报错,比如

Vue项目vscode 安装eslint插件的方法(代码自动修复)

这个时候可以安装vscode eslint插件,就可以自动检测不符合规范的代码。打开vscode左侧扩展面板,搜索eslint,点击安装,重启后生效

Vue项目vscode 安装eslint插件的方法(代码自动修复)

安装好之后,还需要在vscode文件中进行设置:

通过  file->preferences->Settings 出现如下界面:

Vue项目vscode 安装eslint插件的方法(代码自动修复)

点击红框,则会出现配置文件

Vue项目vscode 安装eslint插件的方法(代码自动修复)

把以下代码复制到这个文件中:

{
 // vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,
 // 重新设定tabsize
 "editor.tabSize": 2,
 // #每次保存的时候自动格式化
 "editor.formatOnSave": true,
 // #每次保存的时候将代码按eslint格式进行修复
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
 "javascript",
 "javascriptreact",
 {
  "language": "vue",
  "autoFix": true
 }
 ],
 // #让prettier使用eslint的代码格式进行校验
 "prettier.eslintIntegration": true,
 // #去掉代码结尾的分号
 "prettier.semi": false,
 // #使用带引号替代双引号
 "prettier.singleQuote": true,
 // #让函数(名)和后面的括号之间加个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 // #让vue中的js按编辑器自带的ts格式进行格式化
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  "wrap_attributes": "force-aligned"
  // #vue组件中html代码格式化样式
 }
 },
 "window.zoomLevel": 0,
 "explorer.confirmDelete": false,
 "explorer.confirmDragAndDrop": false,
 "editor.renderControlCharacters": true,
 "editor.renderWhitespace": "all"
}

然后在项目的.eslintrc.js中添加如下代码:

// https://eslint.org/docs/user-guide/configuring

module.exports = {
 root: true,
 parserOptions: {
 parser: 'babel-eslint'
 },
 env: {
 browser: true
 },
 extends: [
 // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
 // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
 'plugin:vue/essential',
 // https://github.com/standard/standard/blob/master/docs/RULES-en.md
 'standard'
 ],
 // required to lint *.vue files
 plugins: ['vue'],
 // add your custom rules here
 rules: {
 // allow async-await
 'no-console': 'off',
 indent: ['error', 2, { SwitchCase: 1 }],
 semi: ['error', 'always'],
 'space-before-function-paren': [
  'error',
  { anonymous: 'always', named: 'never' }
 ],
 'generator-star-spacing': 'off',
 // allow debugger during development
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
 }
}

ctrl + s保存代码后,便会自动修复格式不正确的代码

总结

到此这篇关于Vue项目vscode 安装eslint插件的方法(代码自动修复)的文章就介绍到这了,更多相关vscode 安装eslint插件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一些技巧性实用js代码小结
Oct 14 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
AngularJS语法详解
Jan 23 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 #Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 #Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 #Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 #Javascript
vue-cli设置publicPath小记
Apr 14 #Javascript
vue 实现用户登录方式的切换功能
Apr 14 #Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 #Javascript
You might like
咖啡常见的种类
2021/03/03 新手入门
PHP入门速成教程
2007/03/19 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JavaScript实现三级级联特效
2017/11/05 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python提取页面内url列表的方法
2015/05/25 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
python批量爬取下载抖音视频
2019/06/17 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
个人评语大全
2014/05/04 职场文书
环保建议书100字
2014/05/14 职场文书
环保小标语
2014/06/13 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
安全生产月标语
2014/10/07 职场文书
2014年招生工作总结
2014/11/26 职场文书
爱心募捐通知范文
2015/04/27 职场文书
工作后的感想
2015/08/07 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python