vue 使用 eslint_qq_25186543的博客-程序员宅基地

技术标签: js基础类  

新项目在安装的时候选择  eslint 就会自动生成

旧项目使用

1、安装一个新项目使用 eslint ,然后把根目录的 .eslintrc.js 文件 和 .editorconfig 文件复制到旧项目根目录

2、把新项目里面的 package.json 里面有关 eslint 的内容都复制到旧项目的 package.json 里面,然后 npm install 下载这些配置

"devDependencies": {
    ……    

    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",

    ……
}

3、在配置文件 webpack.base.conf.js 里面加上对 vue 的解析

{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      }

4、vscode 编辑器保存自动格式化为 eslint 格式

     1. 先下载 eslint 插件

     2.在vscode的文件-首选项-设置里,查找eslint,点击在setting.json 里面编辑,配置里添加如下代码即可(代码有注释!),从此直接 Ctrl+S 就能一键格式化了

// 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
    }
  ],
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择 
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    },

  }

3.设置代码后面强制加分号

       在vue根目录的  .eslintrc.js 文件的 rules 文件里面添加一个 'semi': ['error', 'always'], 如下

 rules: {
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'semi': ['error', 'always'], //添加这一项
    }

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_25186543/article/details/103078763

智能推荐

android RadioButton_Easy_Gemini的博客-程序员宅基地

学习目的:1、掌握在Android中如何建立RadioGroup和RadioButton2、掌握RadioGroup的常用属性3、理解RadioButton和CheckBox的区别4、掌握RadioGroup选中状态变换的事件(监听器)RadioButton和CheckBox的区别:1、单个RadioButton在选中后,通过点击无法变为未选中

reader 读到空值怎么处理_大家在读取SqlDatareader里面的数据的时候,都怎么来判断是否为空?..._weixin_39902875的博客-程序员宅基地

你的位置:问答吧-> .NET-> 问题详情大家在读取SqlDatareader里面的数据的时候,都怎么来判断是否为空?Int类型 字符串类型 Datetime类型等if (dr.IsNBnull(1) {(int)dr(1);}这种方法感觉不太简洁,有啥好的方法吗?作者: HelloWorldniao发布时间...

python2 python3 pip_CentOS 升级Python2到Python3并且安装 pip正确方式(解决pip: command not found问题)..._weixin_39806065的博客-程序员宅基地

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家,也给大家做个参考。CentOS 7 中默认安装了 Python,版本比较低(2.7.5),为了使用新版 3.x,需要对旧版本进行升级。由于很多基本的命令、软件包都依赖旧版本,比如:yum。所以,在更新 Python 时,建议不要删除旧版本(新旧版本可以共存)。一、查看当前 python 版本[[email protected]

【百度笔试】度度熊回家_zxc120389574的博客-程序员宅基地

题目:一个数轴上共有N个点,第一个点的坐标是度度熊现在位置,第N-1个点是度度熊的家。现在他需要依次的从0号坐标走到N-1号坐标。但是除了0号坐标和N-1号坐标,他可以在其余的N-2个坐标中选出一个点,并直接将这个点忽略掉,问度度熊回家至少走多少距离?思路:笨办法,忽略每一个点都试试(将vec[i]=vec[i-1],实际上就是忽略了vec[i]),看看哪一个值最小。时间复杂度为&nbs...

sketch浮动布局_使用智能布局和调整大小在Sketch中创建更好的可重用符号_weixin_26732881的博客-程序员宅基地

sketch浮动布局Sketch is a widely used tool for UI designs. It implemented the atomic design methodology and made the workflow of UI design much more efficient. You can create a Symbol in Sketch and use it...

Python访问MySQL数据库并实现其增删改查功能_weixin_34236869的博客-程序员宅基地

概述:对于访问MySQL数据库的操作,我想大家也都有一些了解。不过,因为最近在学习Python,以下就用Python来实现它。其中包括创建数据库和数据表、插入记录、删除记录、修改记录数据、查询数据、删除数据表、删除数据库。还有一点就是我们最好使用一个新定义的类来处理这件事。因为这会使在以后的使用过程中更加的方便(只需要导入即可,避免了重复制造轮子)。实现功能介绍:1.封装一个DB类2.数据库操...

随便推点

Zabbix监控系统自动发现/自动注册_Baymax-夏风的博客-程序员宅基地

案例概述■公司刚刚搭建完Zabbix,现在需要对后续的服务器添加监控,由于公司有几百台服务器,因此使用自动发现或者自动注册来批量添加服务器,并且配置好邮件报警用于及时发现服务器问题。但是由于Zabbix-Server性能有限,所以需要更换Agent工作模式为主动,减轻Zabbix-Server的压力案例前置知识点■获取远程key值Zabbix _get是zabbix服务端的命令,用于检测Agent端的配置是否正确■自动发现自动发现是由Zabbix Server开启发现进程,定时扫描局域网中

csharp create ICS file extension_weixin_30699955的博客-程序员宅基地

string schLocation = "Conference Room 涂聚文约会你"; string schSubject = "Business visit discussion约会"; string schDescription = "Schedule description明天到...

学习系统安全及应用_码薯的博客-程序员宅基地

目录账号安全基本措施使用su命令切换用户Linux中的PAM安全认证PAM认证原理PAM认证的构成PAM安全认证流程使用sudo机制提升权限总结账号安全基本措施系统账号清理●将非登录用户的ShelI设为/sbin/nologinusermod -s /sbin/nologin●锁定长期不使用的账号usermod-L用户名passwd-I用户名passwd -S用户名●删除无用的账号(userdel [-r])●锁定账号文件pa.

an exception or a breakpoint comes from wow64.dll._iteye_20686的博客-程序员宅基地

Sometimes we get a process dump from x64 Windows and when we load it into WinDbg we get the output telling us that an exception or a breakpoint comes from wow64.dll. For example:Loading Dump File [X...

黑客神技!看我如何用Python跟踪个人财务!会计随身携带?让自己的每一笔收支都明细!_Python是世界上最好的语言的博客-程序员宅基地_python和会计怎么联系到一起

如何使用Python:Snake跟踪您的个人财务:在这篇文章中,我想描述一下如何使用一个高度关注数据隐私、100%自我托管并且只使用Python生态系统的工作流来跟踪您的个人财务状况。我也希望你们中的一些人觉得这足够有趣,可以更详细地探讨它。*)我们都知道钱很重要。有钱给我们带来了自由,而缺乏金钱则是一种压力。那么,我们怎么知道我们在这方面做得好吗?答案很简单:我们追踪我们的钱。我们关注的是,有多少钱流入我们的帐户,有多少钱正在流出,以及这些事件何时发生和发生的频率。我们关注的是趋势,经

推荐文章

热门文章

相关标签