各位靓仔靓女，晚上好！今天咱们唠唠嗑，聊聊JavaScript代码界的“美容师”和“纪律委员”——Linting（代码检查）和 Formatting（代码格式化）。别害怕，这俩家伙不是来找茬的，它们可是提升团队效率、保证代码质量的大功臣！
开场白：代码界的“容貌焦虑”与“秩序强迫症”
咱们写代码，就像在盖房子。如果砖头歪七扭八，水泥涂得像狗啃的，那房子能结实吗？代码也一样，风格不统一、错误百出，那项目迟早要崩盘。Linting和Formatting，就是来解决这些问题的。
想象一下，你接手了一个新项目，代码风格五花八门，缩进一会儿两个空格，一会儿四个空格，变量命名一会儿驼峰，一会儿下划线，简直是噩梦！这时候，你就需要Linting和Formatting来拯救你。
第一幕：Linting——代码界的“纪律委员”
Linting，简单来说，就是检查你的代码有没有违反某些规则。这些规则可以是代码风格、潜在错误、安全漏洞等等。它就像一个严格的“纪律委员”，时刻监督你的代码，发现问题就及时提醒你。
Linting能干啥？
-
发现潜在错误： 比如，使用了未定义的变量、比较时使用了
==而不是===、忘记处理异常等等。 -
强制代码风格： 比如，规定使用单引号还是双引号、每行代码的长度限制、变量命名规范等等。
-
提高代码可读性： 统一的代码风格让代码更容易阅读和理解。
-
减少维护成本： 早期发现问题，可以避免后期出现更大的bug，降低维护成本。
Linting工具推荐：ESLint
在JavaScript世界里，ESLint绝对是Linting界的扛把子。它功能强大、配置灵活，而且有大量的插件可以使用。
ESLint怎么用？
-
安装ESLint：
npm install eslint --save-dev -
初始化ESLint配置：
npx eslint --init这个命令会引导你创建一个
.eslintrc.js或.eslintrc.json配置文件。你可以选择ESLint的预设规则，比如Airbnb、Google、Standard等等，也可以自定义规则。 -
配置ESLint规则：
.eslintrc.js配置文件长这样：module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'airbnb', ], parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 12, sourceType: 'module', }, plugins: [ 'react', ], rules: { 'no-unused-vars': 'warn', // 未使用的变量警告 'react/prop-types': 'off', // 关闭 PropTypes 检查 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], 'import/no-extraneous-dependencies': ['error', { devDependencies: true }], 'import/prefer-default-export': 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境禁止使用console 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境禁止使用debugger }, };env: 指定代码运行的环境，比如浏览器、Node.js等等。extends: 继承ESLint的预设规则，可以继承多个。parserOptions: 指定JavaScript的语法版本和特性。plugins: 使用ESLint插件，比如React插件。rules: 自定义规则，可以覆盖预设规则。
常用的规则配置：
规则 描述 取值 no-unused-vars禁止使用未使用的变量 "off"/"warn"/"error"no-console禁止使用 console语句"off"/"warn"/"error"no-debugger禁止使用 debugger语句"off"/"warn"/"error"quotes强制使用单引号或双引号 ["error", "single"]semi强制在语句末尾使用分号 ["error", "always"]indent强制使用一致的缩进 ["error", 2]react/prop-types检查React组件的 propTypes"off"/"warn"/"error"react/jsx-filename-extension强制JSX文件使用特定的扩展名 [1, { extensions: [".js", ".jsx"] }]import/no-extraneous-dependencies禁止引入devDependencies中的模块 (用于生产环境) ["error", { devDependencies: true }]import/prefer-default-export建议每个模块导出默认导出 "off""off": 关闭该规则。"warn": 开启该规则，但只发出警告。"error": 开启该规则，并发出错误，会导致构建失败。
-
运行ESLint：
在命令行中运行：
npx eslint .ESLint会检查当前目录下的所有JavaScript文件，并输出错误和警告。
-
集成到编辑器：
大多数编辑器都有ESLint插件，可以实时检查代码，并在编辑器中显示错误和警告。推荐使用VS Code的ESLint插件。
第二幕：Formatting——代码界的“美容师”
Formatting，就是自动格式化你的代码，让代码风格保持一致。它就像一个专业的“美容师”，帮你把代码整理得整整齐齐、漂漂亮亮。
Formatting能干啥？
-
统一代码风格： 比如，统一缩进、统一换行、统一空格等等。
-
提高代码可读性： 整洁的代码更容易阅读和理解。
-
减少代码审查时间： 团队成员不用再花时间关注代码风格问题，可以更专注于业务逻辑。
-
自动修复代码风格问题： Formatting工具可以自动修复代码风格问题，节省大量时间。
Formatting工具推荐：Prettier
Prettier是Formatting界的当红炸子鸡。它功能强大、配置简单，而且支持多种编程语言。
Prettier怎么用？
-
安装Prettier：
npm install prettier --save-dev -
创建Prettier配置文件：
创建一个
.prettierrc.js或.prettierrc.json配置文件。.prettierrc.js配置文件长这样：module.exports = { semi: true, // 句尾添加分号 trailingComma: 'es5', // 在对象或数组最后一个元素后添加逗号 singleQuote: true, // 使用单引号代替双引号 printWidth: 120, // 一行最多 120 字符 tabWidth: 2, // 使用 2 个空格缩进 useTabs: false, // 不使用制表符缩进 bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" arrowParens: 'always', // 箭头函数，只有一个参数的时候，也带括号 };常用的配置：
配置项 描述 取值 semi是否在语句末尾添加分号 true/falsetrailingComma在对象或数组最后一个元素后添加逗号 "es5"/"none"/"all"singleQuote使用单引号代替双引号 true/falseprintWidth一行最多多少个字符 数字 tabWidth使用多少个空格缩进 数字 useTabs使用制表符缩进 true/falsebracketSpacing在对象，数组括号与文字之间加空格 "{ foo: bar }" true/falsearrowParens箭头函数，只有一个参数的时候，也带括号 "always"/"avoid" -
运行Prettier：
在命令行中运行：
npx prettier --write .Prettier会格式化当前目录下的所有文件，并自动保存修改。
-
集成到编辑器：
大多数编辑器都有Prettier插件，可以自动格式化代码，并在保存时自动运行。推荐使用VS Code的Prettier插件。
第三幕：Linting和Formatting的完美结合
Linting和Formatting可以单独使用，但它们结合起来使用效果更好。ESLint可以检查代码风格和潜在错误，Prettier可以自动格式化代码，让代码风格保持一致。
如何将ESLint和Prettier结合起来？
-
安装相关插件：
npm install eslint-config-prettier eslint-plugin-prettier --save-deveslint-config-prettier: 关闭ESLint中与Prettier冲突的规则。eslint-plugin-prettier: 将Prettier作为ESLint的一个规则来运行。
-
配置ESLint：
修改
.eslintrc.js配置文件：module.exports = { // ... extends: [ 'eslint:recommended', 'plugin:react/recommended', 'airbnb', 'prettier', // 添加prettier ], plugins: [ 'react', 'prettier', // 添加prettier ], rules: { // ... 'prettier/prettier': 'error', // 将prettier作为eslint的一个规则 }, }; -
配置VS Code：
在VS Code的
settings.json文件中添加以下配置：{ "editor.formatOnSave": true, // 保存时自动格式化 "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认的格式化工具为Prettier "eslint.validate": [ "javascript", "javascriptreact" ], "files.eol": "n" // 统一换行符为 LF }这样，每次保存代码时，VS Code会自动运行ESLint和Prettier，检查代码风格和格式化代码。
最佳实践：团队协作的利器
-
统一配置： 团队成员应该使用相同的ESLint和Prettier配置，保证代码风格的一致性。可以将配置文件放到代码仓库中，并使用版本控制系统进行管理。
-
集成到CI/CD： 将ESLint和Prettier集成到CI/CD流程中，可以在代码提交前自动检查代码，避免不符合规范的代码进入代码仓库。
-
定期更新依赖： 定期更新ESLint、Prettier和相关插件，可以获得最新的规则和功能，提高代码质量。
-
自定义规则： 根据团队的实际需求，自定义ESLint和Prettier规则，让代码风格更符合团队的规范。
-
Git Hooks: 使用 Husky 和 lint-staged
为了防止不规范的代码被提交到仓库，我们可以使用Git Hooks。Husky可以让我们轻松地配置Git Hooks，lint-staged 可以只对暂存区的文件进行 linting 和 formatting。
-
安装 Husky 和 lint-staged:
npm install husky lint-staged --save-dev -
配置 Husky:
在
package.json中添加以下配置:{ "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,jsx,ts,tsx}": [ "eslint --fix", "prettier --write", "git add" ] } } -
启用 Husky:
npx husky install
现在，每次提交代码时，Husky 会运行 lint-staged，lint-staged 会只对暂存区的文件运行 ESLint 和 Prettier。如果 ESLint 或 Prettier 发现错误，提交将会被阻止。
-
总结：代码界的“颜值担当”与“品德标兵”
Linting和Formatting，就像代码界的“颜值担当”和“品德标兵”，它们不仅能让你的代码看起来更漂亮，还能提高代码质量、减少维护成本、提升团队协作效率。所以，赶紧用起来吧！
最后的彩蛋：代码示例
这是一个没有使用Linting和Formatting的代码：
function add(a,b){
if(typeof a!=="number"||typeof b!=="number"){
return "Invalid input";
}
return a+ b;
}这是一个使用了Linting和Formatting的代码：
function add(a, b) {
if (typeof a !== 'number' || typeof b !== 'number') {
return 'Invalid input';
}
return a + b;
}显然后者更易读，更规范。
希望今天的分享对大家有所帮助！记住，写代码不仅要实现功能，还要写得漂亮、写得规范！咱们下期再见！