代码规范和风格指南

常见的“代码标准”：

• JavaScript Standard Style

https://standardjs.com/readme-zhcn.html

• Airbnb JavaScript Style Gulde

https://github.com/airbnb/javascript

本次项目是使用的standard风格

ESLint

如果需要团队都使用一种代码风格的话，就使用ESLint代码校验工具进行一个强制的约束

eslint的配置文件

有两点需要注意：

• extends内部的plugin:vue/essential 指的是vue官方提供的eslint-plugin-vue
• @vue/standard 指的是@vue/eslint-config-standard

eslint-plugin-vue

• vue官方提供的ESLint插件
• 官方文档：

https://eslint.vuejs.org

• 用于查找<template>，<script>，.vue文件中的
  • 语法错误
  • Vue.js指令的错误用法
  • 违反Vue风格指南的代码

@vue/eslint-config-standard

• 官方文档：

https://standardjs.com/readme-zhcn.html

• 这是一种无需配置，可以便捷的统一代码风格的方式，具体可以参考官方文档细则
  主要需要注意的是：代码不能有分号
  全部设置完毕之后，在

npm run serve

启动服务器之后，保存代码会自动对代码进行lint，也可以通过

npm run lint

命令执行ESLint的代码校验和修复

自定义校验规则

• ESLint 官网>用户指南>规则 中提供了每种规则的用法以及支持的选项
• ESLint 中文文档：

https://cn.eslint.org

如何查询？
首先要得到规则名称（比如下面例子，添加分号使得风格不允许）

semi就是规则名称
后面的三个错误内容规则都可以在文档中查询到相应的用法

ESLint 配置文件自定义

比如我要关闭分号报错，就在ESLint配置文件下面的rules设置，相关设置内容应当查询文档自行了解

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'semi' : 'off', // 关闭加分号报错
    'semi' : ['error','always'] // 开启不加分号报错
  }
}

但是其实除非有特别的需求，一般不需要自己定义规则，如果真的有相应的需求，那就需要去eslint的官方文档去进行相关的配置项，更改配置信息之后要重启服务器才能查看到新配置的结果
注意
如果修改规则之后，重启不生效，可以将node_modules/.ache的规则缓存目录删除后重启就行了