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变量作用域及可访问性的探讨
Nov 23 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
Vue实现背景更换颜色操作
Jul 17 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
动态样式类封装JS代码
2009/09/02 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
Javascript学习指南
2014/12/01 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
Python中的作用域规则详解
2015/01/30 Python
pandas对指定列进行填充的方法
2018/04/11 Python
python 构造三维全零数组的方法
2018/11/12 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python如何使用函数做字典的值
2019/11/30 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
什么是接口(Interface)?
2013/02/01 面试题
师范毕业生个人求职信
2013/12/09 职场文书
2014和解协议书范文
2014/09/15 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
求职导师推荐信范文
2015/03/27 职场文书
党员转正大会主持词
2015/07/02 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
高三教师工作总结2015
2015/07/21 职场文书
使用python绘制横竖条形图
2022/04/21 Python