vue项目配置eslint(附visio studio code配置)
eslint基础环境搭建
全局安装eslint:npm install eslint -g
项目eslint初始化:eslint --init,按团队或自己的编程风格回答三道题。
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JavaScript
编辑.eslintrc.js
module.exports = {
// 默认情况下,ESLint会在所有父级组件中寻找配置文件,一直到根目录。ESLint一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。
root: true,
// 对Babel解析器的包装使其与 ESLint 兼容。
parser: 'babel-eslint',
parserOptions: {
// 代码是 ECMAScript 模块
sourceType: 'module'
},
env: {
// 预定义的全局变量,这里是浏览器环境
browser: true,
},
// 扩展一个流行的风格指南,即 eslint-config-standard
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
// 此插件用来识别.html 和 .vue文件中的js代码
'html',
// standard风格的依赖包
"standard",
// standard风格的依赖包
"promise"
],
// 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
}
}
3.安装配置文件中依赖包:
eslint
babel-eslint
eslint-plugin-html
eslint-config-standard
eslint-plugin-standard
eslint-plugin-promise
通过 npm install (package) --save-dev 来配置到开发环境中。
并通过 npm install (package) -g 将依赖包安装到全局环境下,为什么还要安装全局环境下,原因可先行思考,稍后会在结尾解释。
截止目前eslint环境就配置好了,可执行eslint test.js来检测是否可以运行成功。
visio studio code 配置eslint
左侧菜单栏选择“扩展”,搜索“eslint”安装并重新加载,即可实现对.js文件的代码检测。
在项目中安装eslint插件:npm install eslint-plugin-html --save-dev (安装过的就不需要了)
配置vsc实现对.vue .html文件中的js代码段的检测: 顶部选项Code -> 首选项 -> 设置,搜索编辑“eslint.validate”添加 "html","vue"!
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
]
可以打开项目中.vue文件,发现不规范的语法都已经被红色波浪线标记出来了。
配置控制台的eslint检测环境
如果你想在控制台查看项目中所有的warning 和 error,就请继续往下看~
保证依赖包都在全局环境目录下安装
执行 eslint --ext .js,.vue src 命令。 --ext用来指定检测的文件格式,src是检测的目录。也可以给该指令提供一个更好记的别名,编辑package.json,在script属性中新增一条。即可通过 npm run lint来检测项目中的warning 和 error了。
"scripts": {
"lint": "eslint --ext .js,.vue src"
},
如何给项目配置eslint到这里就讲完了,最后说下问什么要在全局环境下安装依赖包吧。
只有全局环境下安装了eslint才能执行 eslint --init 和 eslint --ext .js,.vue src 等eslint指令。
当项目执行eslint检测时,会先检测全局环境下有没有eslint,显然文章第一步就是在全局安装了,那么全局环境下的eslint引用依赖包时也只会在全局环境下查找。
如果你现在或之后不需要给项目初始化一个eslint配置,也不需要在控制台输出所有的warning和error,那么就不要全局环境下的eslint。执行 npm configs 查看全局环境下的包的安装路径,如果发现有eslint就删掉好了。
啰里啰嗦讲完了,多谢看完。第一次写文章,有些词不达意,请多多指正。
附录:
eslint官方文档: http://eslint.cn/docs/user-guide/configuring
eslint规则说明:http://www.cnblogs.com/hahazexia/p/6393212.html
vue项目配置eslint(附visio studio code配置)相关推荐
- Vue项目中ESLint配置(VScode)
Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...
- 基于Visio Studio Code打造go的IDE
为什么80%的码农都做不了架构师?>>> 基于Visio Studio Code打造go的IDE [TOC] 前言 最近有点儿时间,把想做的事情列了个清单.开个新坑,学习下 ...
- visio studio code安装之后的两个错误的解决办法
安装visio studio Code出现的两个错误 1.^Error: Cannot find module 'c:/Users/Administrator/Desktop/����Ŀ¼/Micro ...
- Visual Studio Code 配置 Java开发环境
第一步:下载vscode 官网:Visual Studio Code - Code Editing. Redefined 第二步:下载Java 官网:Java Downloads | Orac ...
- 在Visual Studio Code配置GoLang开发环境
在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs Visu ...
- vue项目中eslint检查警告——“Trailing spaces not allowed”
在VSCode中开发Vue项目,eslint检查警告:"Trailing spaces not allowed",这是在警告代码后面有多余的空格导致的,删除空格即可. 转载于:ht ...
- 小白Mac C/C++ for Visual Studio Code配置
小白Mac C/C++ for Visual Studio Code配置 一. VS Code安装 VS Code官网下载地址 (下载完成后是英文的,自己在插件管理里面下载个语言包) C/C++ fo ...
- vue项目报eslint格式错误解决方案
vue项目报eslint格式错误解决方案 参考文章: (1)vue项目报eslint格式错误解决方案 (2)https://www.cnblogs.com/lcosima/p/8990616.html ...
- Motoman机器人离线编程——Visio Studio环境配置
欢迎关注Jungle的Motoman机器人离线编程专栏系列文章: Motoman机器人离线编程--Motocom32开发简介 Motoman机器人离线编程--Visio Studio环境配置 Moto ...
最新文章
- python中os.path.isdir()等函数的作用和用法
- python获取当前文件路径
- Spring @Async配置4. 基于@Async无返回值调用 使用的方式非常简单,一个标注即可解决所有的问题: 1 @Async //标注使用 2 public void asyncMe
- python中的作用域_python 模块的作用域
- 软件编程,在于设计和思想
- Docker 概述 与 CentOS 上安装、卸载、启动
- No package ‘libmatekbd‘ found
- Java调用百度图像识别接口
- 将Ubuntu中文目录改为英文目录
- 用selenium实现百度贴吧自动发帖
- 【leetcode】1175. Prime Arrangements
- wacom板子在MACBOOK里用PS画画的时候,老是画着快捷键就都不能用
- U盘装系统:魔方U盘启动制作
- ThingJS技术分享:建筑建模常用软件一览 3D 可视化
- Java实现发邮件功能
- 什么是polyfill
- 行走在投资界的程序员:千淘资本合伙人李华兵
- 《计算机组成与设计:硬件、软件接口》阅读笔记
- ajax 实验报告,AJAX实验报告 (4500字).doc
- vue2 cli使用wangEditor ( wangEditor安装依赖, wangEditor.vue文件实例, wangEditor工具栏配置的key列表 )
热门文章
- c++ 异步下获取线程执行结果_这份阿里技术官强推的java线程池笔记,建议你看一下
- 服务器运维一般的故障率,服务器平均故障率
- 移动设备 (Android),How-To Geek正在寻找专注于移动设备(Android,iOS,可穿戴设备等)的作家 | MOS86...
- linux 进程带宽限制,在Linux中限制网络带宽使用
- php正则大小写字母,php 常见email,url,英文大小写,字母数字组合等正则表达式详解...
- Faceware 面部捕捉在Unity中的应用
- ファイルアップロード関連のjQueryプラグイン10攻略
- Unity3D在C#编程中的一些命名空间的引用及说明
- offline .net3.5
- C#中DataTable中的Compute方法使用收集