# JavaScript 规范

JavaScript 代码规范包括变量和函数的命名规则，空格、缩进和注释的使用规则，以及其他常用的规范。

ESLint 是一个插件化的 JavaScript 代码检测工具，它可以用于检查常见的 JavaScript 代码错误，也可以进行代码风格检查。这样我们就可以根据自己的喜好制定一套 ESLint 配置，然后应用到所编写的项目上，从而实现辅助编码规范的执行，有效控制项目代码的质量。

# 快速使用

npm i eslint @startdt/eslint-config --save-dev

提示：无需在项目中安装 eslint-plugin-vue、eslint-config-* 以及其他第三方依赖。

使用配置文件：

// .eslintrc.js
module.exports = {
    extends: '@startdt/eslint-config',
    rules: {
        // 自定义规则
    },
};

或者项目属性：

// package.json
"eslintConfig": {
    "extends": "@startdt/eslint-config",
    "rules": {}
}

# 自动检查

# 保存时检查

首先，你需要安装官方提供的 ESLint 扩展：dbaeumer.vscode-eslint

安装之后，在 .vscode/settings.json 中配置自动修复：

{
    "eslint.run": "onSave",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

完成后，在 Visual Studio Code 中使用 command + s 保存文件时，将自动进行代码检查。

如果将 ESLint 用作默认格式化程序，则应在打开 editor.formatOnSave 时将 editor.codeActionsOnSave 关闭。否则，检测到的文件将被修复两次，这是不必要的。

# 提交时检查

首先，你需要安装 husky 和 lint-staged 依赖，以便在执行 git commit 时对 Git 暂存区文件进行代码检查：

npm install husky lint-staged --save-dev

如果你已经安装了 @next/cli-service，则无需单独安装 husky 依赖。因为它会安装 yorkie，同样可以让你在 package.json 的 gitHooks 字段中方便地配置钩子。

安装之后，在 package.json 中添加 pre-commit 和 lint-staged 配置：

{
    "gitHooks": {
        "pre-commit": "lint-staged"
    },
    "lint-staged": {
        "*.js": [
            "eslint --fix", // 或 next-cli-service lint
            "git add"
        ]
    }
}

完成后，执行 git commit 提交时，将自动对 git add 添加的文件进行代码检查。

# 代码风格

# 错误级别

默认情况下，所有启用的规则都是 "error" 级别的严重程度；
已启用规则，且支持 --fix 选项自动修复的规则都是 "warn" 级别的严重程度;
未启用规则，默认将值设置为 "off" 进行显式配置，不产生任何错误信息；
继承的规则，包括插件的规则都遵循以上错误级别；

CSS 规范 Vue 规范