本文主要是介绍02-前端项目代码检查规范，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前端项目代码检查规范

前言： 每个程序员都有自己的编码习惯，如果你写自己的项目怎么折腾都没关系，但是在公司中我们希望每个人写出的代码都要符合一个统一的规则，这样别人看源码就能够看得懂，因为源码是符合统一的编码规范制定的。
首先，分为两个部分： 第一：vscode插件工具类的eslint和prettiter以及vetur 作用是为在本地保存的时候，通过.eslintrc.js文件中所写的规则，eslint插件去让我们能实时的看到哪里不符合规则，鼠标放在波浪线上去会提示为什么错了；vetur,prettier可以通过配置，也是为了能在我们实时保存的时候，能立马按照我们设定的配置规则去做代码格式化。

 

第二：npm依赖，prettiter，vetur , eslint 安装npm这些包的依赖是为了我们能对整个项目的指定符合我们设定的每一个文件进行格式化，校验。属于自动化批量操作。
下面来说说npm包都需要安装哪些？并且都是干什么的？ 1) 安装eslint相关依赖

npm install -D eslint eslint-plugin-vue

eslint只能检查标准的 JavaScript 语法，针对每一个开发语言都有一个独立的插件，对应vue的就是eslint-plugin-vue了 2）安装prettier相关依赖：

npm install prettier  eslint-plugin-prettier eslint-config-prettier -D 

eslint-plugin-prettier ：插件会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记 eslint-config-prettier：能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保，这个配置在extends的最后一项。 使用 vuecli 创建项目时，不选择 lint 选项。 至此，该安装的插件就安装上了。接下来我们贴一下各个文件的配置：

---

.eslintrc

module.exports = {
  // .eslintrc.js（项目级配置） 和 src/.eslintrc.js（目录级配置），这两个配置文件会进行合并，但是 src/.eslintrc.js 具有更高的优先级。
  root: true, // 当前目录为根，不会再向上查找
  parserOptions: {
    // 解析器类型
    // espima(默认), babel-eslint, @typescript-eslint/parse
    parser: 'babel-eslint',
    // 代码类型：script(默认), module
    sourceType: 'module',
    // es 版本号，默认为 5，也可以是用年份，比如 2015 (同 6)
    ecamVersion: 6
  },
  // 配置的环境
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],
  rules: {
    'vue/html-indent': 'off',
    'vue/attribute-hyphenation': 0, // 忽略属性连字
    'vue/max-attributes-per-line': [0, { singleline: 10, multiline: { max: 1, allowFirstLine: false } }], // 每行最大属性
    'vue/singleline-html-element-content-newline': 'off', // 单行html元素内容在新的一行
    'vue/multiline-html-element-content-newline': 'off', // 多行html元素内容在新的一行
    'vue/html-closing-bracket-newline': 'off', // html右括号在新的一行
    'vue/no-v-html': 'off', // 不使用v-html
    'vue/html-self-closing': 0, // 忽略html标签自闭合
    'accessor-pairs': 2, // 应同时设置setter和getter
    'arrow-spacing': [2, { before: true, after: true }], // 箭头间距
    'vue/require-default-prop': 0, // 不检查默认属性
    'vue/require-prop-types': 0, // 不检查默认类型
    'block-spacing': [2, 'always'], // 块间距
    'brace-style': [2, '1tbs', { allowSingleLine: true }], // 大括号样式允许单行
    camelcase: [0, { properties: 'always' }], //为属性强制执行驼峰命名
    'comma-dangle': [2, 'never'], // 逗号不使用悬挂
    'comma-spacing': [2, { before: false, after: true }], // 逗号间距
    'comma-style': [2, 'last'], //（默认）与数组元素，对象属性或变量声明在同一行之后和同一行需要逗号
    'constructor-super': 2,
    'consistent-this': [2, 'that'], //强制this别名为that
    curly: [2, 'multi-line'], // 当一个块只包含一条语句时，不允许省略花括号。
    'dot-location': [2, 'property'], //成员表达式中的点应与属性部分位于同一行
    'eol-last': 2, // 强制文件以换行符结束（LF）
    eqeqeq: ['error', 'always', { null: 'ignore' }], // 强制使用全等
    'generator-star-spacing': [2, { before: true, after: true }], // 生成器中'*'两侧都要有间距
    'global-require': 1, // 所有调用require()都位于模块的顶层
    indent: [0, 2, { SwitchCase: 1 }], //缩进风格
    'key-spacing': [2, { beforeColon: false, afterColon: true }], // 强制在对象字面量属性中的键和值之间保持一致的间距
    'keyword-spacing': [2, { before: true, after: true }], // 关键字如if/function等的间距
    'new-cap': [2, { newIsCap: true, capIsNew: false }], // 允许在没有new操作符的情况下调用大写启动的函数;（默认）要求new使用大写启动函数调用所有操作符
    'new-parens': 2, // JavaScript通过new关键字调用函数时允许省略括号
    'no-array-constructor': 1, // 不允许使用Array构造函数。除非要指定生成数组的长度
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有开发环境可以使用console
    'no-class-assign': 2, // 不允许修改类声明的变量
    'no-const-assign': 2, // 不能修改使用const关键字声明的变量
    'no-control-regex': 0, // 不允许正则表达式中的控制字符
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有开发环境可以使用debugger
    'no-delete-var': 2, // 不允许在变量上使用delete操作符
    'no-dupe-args': 2, // 不允许在函数声明或表达式中使用重复的参数名称
    'no-dupe-class-members': 2, // 不允许在类成员中使用重复的参数名称
    'no-dupe-keys': 2, // 不允许在对象文字中使用重复键
    'no-duplicate-case': 2, // 不允许在switch语句的case子句中使用重复的测试表达式
    'no-empty-character-class': 2, // 不允许在正则表达式中使用空字符类
    'no-empty-pattern': 2, // 不允许空块语句
    'no-eval': 2, // 不允许使用eval
    'no-ex-assign': 2, // 不允许在catch子句中重新分配例外
    'no-extend-native': 2, // 不允许直接修改内建对象的原型
    'no-extra-boolean-cast': 2, // 禁止不必要的布尔转换
    'no-extra-parens': [2, 'functions'], // 仅在函数表达式附近禁止不必要的括号
    'no-fallthrough': 2, //消除一个案件无意中掉到另一个案件
    'no-floating-decimal': 2, //消除浮点小数点，并在数值有小数点但在其之前或之后缺少数字时发出警告
    'no-func-assign': 2, // 允许重新分配function声明
    'no-implied-eval': 2, // 消除隐含eval()
    'no-inner-declarations': [2, 'functions'], // 不允许function嵌套块中的声明
    'no-invalid-regexp': 2, //不允许RegExp构造函数中的无效正则表达式字符串
    'no-irregular-whitespace': 2, //捕获无效的空格
    'no-iterator': 2, //消除阴影变量声明
    'no-label-var': 2, //禁止创建与范围内的变量共享名称的标签
    'no-labels': [2, { allowLoop: false, allowSwitch: false }], // 消除 JavaScript 中使用带标签的语句
    'no-lone-blocks': 2, //消除脚本顶层或其他块中不必要的和可能混淆的块
    'no-mixed-spaces-and-tabs': 2, // 不允许使用混合空格和制表符进行缩进
    'no-multi-spaces': 2, // 禁止在逻辑表达式，条件表达式，声明，数组元素，对象属性，序列和函数参数周围使用多个空格
    'no-multi-str': 2, // 防止使用多行字符串
    'no-multiple-empty-lines': [2, { max: 1 }], // 最多一个空行
    'no-native-reassign': 2, // 不允许修改只读全局变量
    'no-new-object': 2, // 不允许使用Object构造函数
    'no-new-require': 2, // 消除new require表达的使用
    'no-new-symbol': 2, // 防止Symbol与new 同时使用的意外错误
    'no-new-wrappers': 2, // 杜绝使用String，Number以及Boolean与new操作
    'no-obj-calls': 2, // 不允许调用Math，JSON和Reflect对象作为功能
    'no-octal': 2, // 不允许使用八进制文字
    'no-octal-escape': 2, // 不允许字符串文字中的八进制转义序列
    'no-path-concat': 2, // 防止 Node.js 中的目录路径字符串连接无效
    'no-redeclare': 2, // 消除在同一范围内具有多个声明的变量
    'no-regex-spaces': 2, // 在正则表达式文字中不允许有多个空格
    'no-return-assign': [2, 'except-parens'], // 消除return陈述中的任务，除非用括号括起来
    'no-self-assign': 2, // 消除自我分配
    'no-self-compare': 2, // 禁止比较变量与自身
    'no-sequences': 2, // 禁止使用逗号运算符
    'no-sparse-arrays': 2, // 不允许稀疏数组文字
    'no-this-before-super': 2, // 在呼call前标记this/super关键字super()
    'no-throw-literal': 2, // 不允许抛出不可能是Error对象的文字和其他表达式
    'no-trailing-spaces': 2, // 不允许在行尾添加尾随空白
    'no-undef': 2, // 任何对未声明的变量的引用都会导致错误
    'no-undef-init': 2, // 消除初始化为undefined的变量声明
    'no-underscore-dangle': 0, // 标识符不能以_开头或结尾
    'no-unexpected-multiline': 2, // 不允许混淆多行表达式
    'no-unmodified-loop-condition': 2, // 查找循环条件内的引用，然后检查这些引用的变量是否在循环中被修改
    'no-unneeded-ternary': [2, { defaultAssignment: false }], // 不允许将条件表达式作为默认的分配模式
    'no-unreachable': 2, // 不允许可达代码return，throw，continue，和break语句后面还有语句。
    'no-unsafe-finally': 2, // 不允许return，throw，break，和continue里面的语句finally块
    'no-unused-vars': [2, { vars: 'all', args: 'after-used' }],
    // 消除未使用的变量，函数和函数的参数
    // vars: 'all' 检查所有变量的使用情况，包括全局范围内的变量。这是默认设置。 args: 'after-used' 只有最后一个参数必须使用。例如，这允许您为函数使用两个命名参数，并且只要您使用第二个参数，ESLint 就不会警告您第一个参数。这是默认设置。
    'no-useless-call': 2, // 标记使用情况，Function.prototype.call()并且Function.prototype.apply()可以用正常的函数调用来替代
    'no-useless-computed-key': 2, // 禁止不必要地使用计算属性键
    'no-useless-constructor': 2, // 在不改变类的工作方式的情况下安全地移除的类构造函数
    'no-useless-escape': 0, // 禁用不必要的转义字符
    'no-whitespace-before-property': 2, // 如果对象的属性位于同一行上，不允许围绕点或在开头括号之前留出空白
    'no-with': 2, //禁用with
    'no-var': 2, // 禁用var
    'one-var': [2, { initialized: 'never' }], // 强制将变量声明为每个函数（对于var）或块（对于let和const）范围一起声明或单独声明。 initialized: 'never' 每个作用域要求多个变量声明用于初始化变量
    'operator-linebreak': [2, 'after', { overrides: { '?': 'before', ':': 'before' } }], // 实施一致的换行
    'padded-blocks': [2, 'never'], // 在块内强制执行一致的空行填充
    'prefer-destructuring': ['error', { object: false, array: false }], // 此规则强制使用解构而不是通过成员表达式访问属性。
    quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], // avoidEscape: true 允许字符串使用单引号或双引号，只要字符串包含必须以其他方式转义的引号 ;allowTemplateLiterals: true 允许字符串使用反引号
    radix: 0, //parseInt必须指定第二个参数
    semi: [0, 'always'], // 不使用分号
    'semi-spacing': [2, { before: false, after: true }], // 强制分号间隔
    'space-before-blocks': [2, 'always'], // 块必须至少有一个先前的空间
    'space-before-function-paren': [0, 'never'], // 在(参数后面不允许任何空格
    'space-in-parens': [0, 'never'], // 禁止或要求（或）左边的一个或多个空格
    'space-infix-ops': 2, // 强制二元运算符左右各有一个空格
    'space-unary-ops': [2, { words: true, nonwords: false }], // wo·rds: true 如：new，delete，typeof，void，yield 左右必须有空格 // nonwords: false 一元运算符，如：-，+，--，++，!，!!左右不能有空格
    'spaced-comment': [
      2,
      'always',
      { markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }
    ], // 注释开始后，此规则将强制间距的一致性//或/*
    'template-curly-spacing': [2, 'never'], // 不允许大括号内的空格
    'use-isnan': 2, //禁止比较时使用NaN，只能用isNaN()
    'valid-typeof': 2, //必须使用合法的typeof的值
    'wrap-iife': [2, 'any'], //立即执行函数表达式的小括号风格
    'yield-star-spacing': [2, 'both'], // 强制执行*周围 yield*表达式的间距，两侧都必须有空格
    yoda: [2, 'never'],
    'prefer-const': 2, // 使用let关键字声明的变量，但在初始分配后从未重新分配变量，应改为const声明
    'object-curly-spacing': [0, 'always', { objectsInObjects: false }], // 不允许以对象元素开始和/或以对象元素结尾的对象的大括号内的间距
    'array-bracket-spacing': [2, 'never'] // 不允许数组括号内的空格
  }
}

.eslintignore：忽略要被检测的

build/*.js
src/assets
public
dist
.eslintrc.js
node_modules/*

.prettierrc.js

module.exports = {
  printWidth: 120, //换行长度
  singleQuote: true, // 使用单引号而不是双引号
  tabWidth: 2, // 会忽略vetur的tabSize配置
  semi: false, // 句尾是否加;
  useTabs: false, // 是否利用tab替代空格
  trailingComma: 'none', // 多行时，尽可能打印尾随的逗号
  arrowParens: 'avoid' // allow paren-less arrow functions 箭头函数的参数使用圆括号
}

.prettierignore：忽略要被格式化的

build/*.js
dist
node_modules/*

工作区的setting.json：（.vscode文件夹下的setting.json）

{
    /* 开启保存时自动格式化 */
    "editor.formatOnSave": true,
  
    /* eslint的配置 */
    "eslint.run": "onSave",
    "eslint.options": {
      "extensions": [".js", ".vue"]
    },
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true // 保存时自动修复
    },
    // 关闭 vscode 默认的检查工具
    "html.validate.scripts": false,
    "javascript.validate.enable": false,
    "eslint.alwaysShowStatus": true,
    "eslint.format.enable": true,
    "scss.lint.duplicateProperties": "error",
    "css.lint.duplicateProperties": "error",
    "less.lint.zeroUnits": "error",
    "eslint.validate": ["javascript", "javascriptreact", "vue-html", "vue", "html"],
  
    /* 每种语言默认的格式化规则 */
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
  }
  
 

用户的setting.json （自己可以个性化设置）

{
  // 图标主题（需要安装插件：vscode-icons-mac）
  "workbench.iconTheme": "vscode-icons-mac",
  //打开文件不覆盖
  "workbench.editor.enablePreview": false
}

package.json

  1）中配置一个统一格式化的脚本命令
  "prettier": "prettier --write '**/*.{js,css,scss,ts,vue,html}'"
  2）统一按照eslint修复的命令
  "eslint": "eslint '**/*.{js,css,scss,ts,vue}' --fix"

第二：代码提交前拦截： 1.安装Husky

  npm install -D husky@4.2.5

2.安装commitlint：

  npm install -D @commitlint/config-conventional @commitlint/cli

3.新建：.commitlintrc.js

// 提交格式：git commit -m <type>[optional scope]: <description>
/**
 * type类型
  upd：更新某功能（不是 feat, 不是 fix）
  feat：新功能（feature）
  fix：修补bug
  perf: 优化相关，比如提升性能、体验
  docs：文档（documentation）
  style： 格式（不影响代码运行的变动）
  refactor：重构（即不是新增功能，也不是修改bug的代码变动）
  test：增加测试
  chore：构建过程或辅助工具的变动
 */
// optional scope ：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。
// description：一句话描述此次提交的主要内容，做到言简意赅。
// 0为disable，1为warning，2为error
// subject是 commit 目的的简短描述，可以做一些配置，如最大长度限制
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', ['upd', 'feat', 'fix', 'perf', 'refactor', 'docs', 'chore', 'style', 'revert', 'test']],
    'type-case': [0], //type大小写
    'type-empty': [0],
    'scope-empty': [0], //作用域
    'subject-case': [0], //条件说明不能为空
    'scope-case': [0], //作用域不区分大小写
    'subject-full-stop': [0, 'never'], // 条件可以以 .结尾
    'header-max-length': [0, 'always', 150] // header有value或更少的字符
  }
}

4.package.json中配置

"husky": {
  "hooks": {
    "pre-commit": "git add . && npm run prettier && npm run lint",
    "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
  }
}

 

这篇关于02-前端项目代码检查规范的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！