前端代码规范

一、Standard 代码规范介绍:

1.使用两个空格 – 进行缩进

2.字符串使用单引号 – 需要转义的地方除外

3.不再有冗余的变量 – 这是导致 大量 bug 的源头!

4.无分号 –

5.行首不要以 (, [, or ` 开头

6.关键字后加空格

7.函数名后加空格

8.坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null。

...

二、代码格式化配置

1.安装两个插件： ESlint 和 Prettier

  ESLint 是一个插件， 用来对 javascript 代码检测质量的工具 ，说白了就是做 对代码质量检测使用的

     例如未使用的变量，未定义的引用，比较时使用 ===，禁止不必要的括号 等等代码质量检测

  ESLint大大提高了团队协作的代码规范统一性，以及个人的代码质量

 Prettier 的作用主要是进行代码格式化

ESLint 的作用是代码质量检测，Prettier 的作用则主要是代码格式化

2.配置方式：

①在项目的根目录下创建 .vscode 文件夹，注意：文件夹名字前面带 . （在对代码进行处理的时候，会优先走 .vscode 里面的配置 ）

②在 .vscode 文件夹下，创建 settings.json 文件，用来对 当前项目进行格式化（用来告诉 VsCode ，按照 .vscode 中的配置对代码进行格式化 ）

代码：

{
  // eslint 保存格式化
  "eslint.enable": true,
  // 执行 eslint 检测的时间，onType 输入时
  "eslint.run": "onType",
  //指定 eslint 所处理的文件的后缀
  "eslint.options": {
    "extensions": [".js", ".ts", ".jsx", ".tsx", ".vue"]
  },
  // 编辑器保存格式化
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  // .ts 文件格式化程序
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // .vue 文件格式化程序
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 操作时作为单词分隔符的字符
  "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",

  // 一个制表符等于的空格数
  "editor.tabSize": 2,

  // 行尾字符
  // "files.eol": "\n",

  // 保存到额时候用使用 prettier 进行格式化
  "editor.formatOnSave": true,
  
  // // 不要有分号
  // "prettier.semi": false,
  // // 使用单引号
  // "prettier.singleQuote": true,
  // // 默认使用prittier作为格式化工具
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  // // 一行的字符数，如果超过会进行换行，默认为80
  // "prettier.printWidth": 200,
  // // 尾随逗号问题，设置为none 不显示 逗号
  // "prettier.trailingComma": "none"
}

③在项目根目录下创建 .prettierrc 文件，用来配置

代码：

{
  "semi": false,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 130,
  "trailingComma": "none"
}

注意：看方法、函数的前面是否提示需要加一个空格，配置 Eslint 检测

在项目根目录下找到 .eslintrc.js，进行配置，

        主要是为了解决这个空格问题

        原因是因为 Eslint 和 Prettier 的格式化工具冲突了

代码：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'space-before-function-paren': 0, // 处理规范冲突
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}