Vue项目关于eslint

Vue项目关于eslint  新公司的Vue项目没有配置eslint,虽然平时coding的时候都会按照eslint的标准去写,但是没有统一的配置后期项目代码review的时候总还是不太方便。  Vue的项目配置eslint还是很简单的。它属于依赖插件中的一种,可以像安装其他插件一样在命令行用npminstalleslint-g安装,也可以修改package.json文件去更新项目的依赖包,重新跑一遍npm…

大家好,又见面了,我是你们的朋友全栈君。

    新公司的Vue项目没有配置eslint,虽然平时coding的时候都会按照eslint的标准去写,但是没有统一的配置后期项目代码review的时候总还是不太方便。

    Vue的项目配置eslint还是很简单的。它属于依赖插件中的一种,可以像安装其他插件一样在命令行用npm install eslint -g安装,也可以修改package.json文件去更新项目的依赖包,重新跑一遍npm install就可以了。

    eslint常用的依赖有很多,我贴出我用的一些。在package.jsonde 的dependencies或者devDependencies中添加下列属性即可:

"babel-eslint": "^7.1.1",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",

    然后重跑一遍npm install。不用担心,因为只添加了这几个依赖,速度会比较快,不会耽误太多开发的时间。

    安装完依赖包之后不会生成 eslintrc.js这个配置文件,需要别的项目拷或者自己查阅官网配置。。。。我是菜鸡…拷的。

可以原封不动拷进去!   
// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

新建js文件并命名为.eslintrc.js然后把上面的代码复制粘贴进去。

    项目中配置好eslint后,还需要到编辑器的设置里边去打开eslint的开关。这里以webstorm为例。

    Vue项目关于eslint

    然后apply–>OK就好了。

(———————————-割————————————-)

    有些小伙伴担心项目以前没有按照eslint的规范写,配置好以后满篇的错误怎么办。不用担心,你的ide会帮你做很多事情。

    还是以强大的webstorm为例,对单个文件点击右键–>Fix ESLint Problems

    当然,你可以对整个项目点击右键,那就是依照eslint的代码标准格式化项目代码。

    好的代码规范会让你的代码无论何时打开,都不至于乱到不想多看。其实写的久了,不用eslint,一样可以写出整洁漂亮的代码。因为,习惯是最有效的约束。

    

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150494.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • JAVA之文件操作[通俗易懂]

    JAVA之文件操作[通俗易懂]Console此类包含多个方法,可访问与当前Java虚拟机关联的基于字符的控制台设备(如果有)。虚拟机是否具有控制台取决于底层平台,还取决于调用虚拟机的方式。如果虚拟机从一个交互式命令行开始启动,且没有重定向标准输入和输出流,那么其控制台将存在,并且通常连接到键盘并从虚拟机启动的地方显示。如果虚拟机是自动启动的(例如,由后台作业调度程序启动),那么它通常没有控制台。如果此虚拟机具

    2022年10月26日
  • 干净卸载mysql,个人亲测,这一次终于成功了

    干净卸载mysql,个人亲测,这一次终于成功了(一)卸载面板中的数据库二、卸载过后,删除文件夹中的mysql,如删除C:\ProgramFiles(x86)\MySQL该目录下剩余了所有文件,把mysql文件夹也删了三、windows+R运行“regedit”文件,打开注册表四、删除注册表:HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Ap…

  • 医疗大数据平台的主流解决方案

    医疗大数据平台的主流解决方案多源异构数据汇聚分发系统:通过数据汇集和分发服务引擎,按照统一的数据格式和接口规范采集来自于不同厂家、不同设备类型、不同数据格式、不同传输协议的体征数据,然后进行数据存储,最后通过消息开放服务中间件实时分发至电子健康档案系统。   统一资源池的电子健康档案系统:电子健康档案系统是实施医疗信息 化管理和提供个性化医护服务的核心,它以用户或患者为中心,建立人口统计信息、既往病史、健康因素、家…

  • Linux之telnet命令[通俗易懂]

    Linux之telnet命令[通俗易懂]telnet命令通常用来远程登录,默认端口是23。telnet程序是基于TELNET协议的远程登录客户端程序。Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主

  • fmincon函数应用实例_abb调用例行程序

    fmincon函数应用实例_abb调用例行程序前言一般我们写接口自动化的时候,遇到复杂的逻辑,都会调用API方法来满足前置条件,Pytest的特性是无法用例之间相互调动的,我们一般只调用自己封装的API方法。而httprunner支持用例之间

  • 谷歌地图离线地图开发教程视频_谷歌地图离线

    谷歌地图离线地图开发教程视频_谷歌地图离线谷歌离线地图开发主要有两部分组成:1、获取离线地图数据;因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用;2、离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apache提供的WEB服务器一样,他是一种准们的地图服务:提供了包括WEB服务、TMS服务、WMTS服务等等。离线地图数据的获取:可以通过【大地图下载器】下载到。下面将一…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号