DDR爱好者之家 Design By 杰米
一、ESLint
协同开发过程中,经常感受到来自代码检视的恶意。代码习惯不一致,看半天;居然提交低级错误,我的天(╯‵□′)╯︵┻━┻!...研究了一番,决定使用ESLint来做代码规范检查。
二、配置方式
- JavaScript注释:通过JavaScript注释把配置信息嵌入代码中。
- package.json:在package.json文件中的eslintConfig字段中指定配置。
- 配置文件:通过.eslintrc.(js/json/yaml/yml)的独立文件来为整个目录或者子目录指定配置信息,ESlint会查找并且自动读取配置文件。
三、配置过程(配置文件)
安装相关npm包
yarn add eslint babel-eslint eslint-plugin-vue eslint-friendly-formatter --dev
增加文件
- .eslintignore 用来配置不需要检查的文件(类似git的.gitignore)。
- .eslintrc.js 用来配置ESlint验证规则的配置文件。
修改webpack配置文件
module.exports = { module: { rules: [ test: /\.(js|vue)$/, loader: "eslint-loader", enforce: "pre", //指定检查的目录 include: [resolve(__dirname, 'src')], //eslint检查报告的格式规范 options: { formatter: require("eslint-friendly-formatter") } ] } }
四、配置文件详解
以.eslintrc.js为例
module.exports = { //一旦配置了root,ESlint停止在父级目录中查找配置文件 root: true, //解析器 parser: "babel-eslint", //想要支持的JS语言选项 parserOptions: { //启用ES6语法支持(如果支持es6的全局变量{env: {es6: true}},则默认启用ES6语法支持) //此处也可以使用年份命名的版本号:2015 ecmaVersion: 6, //默认为script sourceType: "module", //支持其他的语言特性 ecmaFeatures: { //... } }, //代码运行的环境,每个环境都会有一套预定义的全局对象,不同环境可以组合使用 env: { es6: true, browser: true, jquery: true }, //访问当前源文件中未定义的变量时,no-undef会报警告。 //如果这些全局变量是合规的,可以在globals中配置,避免这些全局变量发出警告 globals: { //配置给全局变量的布尔值,是用来控制该全局变量是否允许被重写 test_param: true }, //支持第三方插件的规则,插件以eslint-plugin-作为前缀,配置时该前缀可省略 //检查vue文件需要eslint-plugin-vue插件 plugins: ["vue"], //集成推荐的规则 extends: ["eslint:recommended", "plugin:vue/essential"], //启用额外的规则或者覆盖默认的规则 //规则级别分别:为"off"(0)关闭、"warn"(1)警告、"error"(2)错误--error触发时,程序退出 rules: { //关闭“禁用console”规则 "no-console": "off", //缩进不规范警告,要求缩进为2个空格,默认值为4个空格 "indent": ["warn", 2, { //设置为1时强制switch语句中case的缩进为2个空格 "SwitchCase": 1, //分别配置var、let和const的缩进 "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } }], //定义字符串不规范错误,要求字符串使用双引号 quotes: ["error", "double"], //.... //更多规则可查看http://eslint.cn/docs/rules/ } }
使用JavaScript注释启用或禁止指定规则
/* eslint-disable */ alert('message'); /* eslint-enable no-alert, no-console*/ ...
层叠配置
ESlint支持层叠配置,检测文件的规则是其目录层级结构中所有.eslintrc文件的组合,当规则冲突的时候,离检测文件最近的规则优先。
默认情况下,ESlint会沿着父级目录网上寻找配置文件,直到根目录。如果配置文件中有root: true,则ESlint会停止在父级目录中查找。
五、配置过程中出现的问题
出现错误:Use the latest vue-eslint-parser。
解决方法: 把parser: "babel-eslint"移动到parserOptions中。
{ //parser: "babel-eslint", parserOptions: { parser: "babel-eslint", //... } }
问题原因: eslint-plugin-vue中的很多规则都需要vue-eslint-parser检查<template>, vue-eslint-parser和babel-parser二者有冲突。
参考链接
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]