vue项目eslint环境配置与vscode配置eslint
2018-06-07 09:21
1011 查看
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
- eslint-plugin-node
通过 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就删掉好了
相关文章推荐
- vscode eslint配置vue遇到的问题
- VS Code使用 Vue工程配置 eslint
- Vue-cli Eslint在vscode里代码自动格式化的方法
- vscode中配置eslint
- VScode关于Eslint的配置
- VSCode 配置React Native开发环境的方法
- 在VSCode中配置GO开发环境用户设置
- vue2.0项目创建之环境变量配置
- 如何在vscode中配置ESLint
- vue 项目移动端使用淘宝自适应插件 环境配置
- vue-cli中的ESlint配置文件eslintrc.js详解
- vue项目环境配置、创建及启动
- vscode前端常用插件推荐,搭建JQuery、Vue等开发环境
- vue-cli生成的项目配置开发和生产环境不同的接口
- VSCode配置C++编写环境
- Ubuntu下配置VScode的C++编程环境
- VSCode打开vue项目的vue组件提示错误的解决办法及key属性的作用
- VSCode下C++环境的配置
- vue-cli脚手架构建了项目如何去除Eslint验证(语法格式验证)
- Ubuntu下VSCode的Python运行调试环境的配置