eslint规范在项目中的实现—

先附上参考链接：

1、创建vue项目

vue create test，取消选中cli中自带的linter/formatter，等安装完成之后手动安装，然后下一步下一步完成项目创建。

2、cd到项目目录，npm run serve，成功启动项目

3、安装eslint相关包

npm install eslint eslint-plugin-jsx-a11y eslint-plugin-vue @vue/eslint-config-airbnb eslint-plugin-vuejs-accessibility -D

注释：@vue/eslint-config-airbnb 是应用在vue项目中的规范，原版是eslint-config-airbnb，可以在npm上搜索一下，周下载量在3千万。

4、在当前根目录下，也就是和src文件同级目录下，新建一个文件.eslintrc.js文件，此文件为eslint的配置文件，比如你们公司你们团队有什么开发规则，可以在这个文件中进行自定义配置。一些规则翻译请看https://cloud.tencent.com/developer/section/1135580。airbnb的中文翻译版可以看第二个链接。

.eslintrc.js基础版示例，保证能运行，新手体验一把。

// eslint官网配置地址 https://eslint.bootcss.com/docs/user-guide/configuring

module.exports = {

  "parser": "vue-eslint-parser", // 使用vue-eslint-parser解析器。ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器

  // 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法

  "parserOptions": {

    "ecmaVersion": 8, // ecmaVersion - 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本

    "sourceType": 'module' // sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)

  },

  // 一个环境定义了一组预定义的全局变量

  "env": {

    "browser": true,

    "node": true,

    "es6": true

  },

  // 一个配置文件可以被基础配置中的已启用的规则继承

  "extends": [

    "@vue/airbnb",

  ],

  // rules 属性可以做下面的任何事情以扩展（或覆盖）规则

  "rules": {

    "semi": "off", // 语句强制分号结尾

    "prefer-const": "off", // 此规则旨在标记使用let关键字声明的变量，但在初始分配后从未重新分配变量。

    "comma-dangle": "error", // 强制在对象和数组文字中一致地使用尾随逗号

    "func-names": "error", // 该规则可以强制或禁止使用命名函数表达式

    "space-before-function-paren": ["off"], // 在函数括号之前强制执行一致的间距，因此，只要空格不符合指定的偏好，就会发出警告

    "arrow-parens": ["error", "as-needed"], // 当它们只有一个参数时，箭头函数可以省略括号。在所有其他情况下，参数必须包含在括号内

    "arrow-body-style": "error", // 该规则可以强制或禁止在箭头函数体的周围使用大括号

    "no-multi-spaces": "error", // 规则旨在禁止在逻辑表达式，条件表达式，声明，数组元素，对象属性，序列和函数参数周围使用多个空格

    "eol-last": "off", // 在非空文件的末尾至少执行一个换行符（或不存在）

  }

}

5、在根目录，也就是src同级目录新建.eslintignore文件

build/*.js

src/assets

public

dist

6、完成这些配置以后，在package.json中配置脚本，"lint": "eslint --ext .js,.vue src"，在终端输入命令, npm run lint，开始进行检查，结果会在控制台输出。

这里可以查看哪些出现了问题，红框里看违反了哪些规则。规则可以在rules中根据团队习惯进行配置。

巴特西

eslint规范在项目中的实现——vue项目举例

最新文章

热门文章