前端架构师神技，三招统一代码风格

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文从代码规范，代码检查，代码格式化，以及编辑器自动化实现的方向，介绍代码规范统一在我们团队的实践应用。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"大纲预览","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文介绍的内容包括以下方面：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"认识代码规范","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"制定和统一规范","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"神技一：ESLint","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"神技二：Prettier","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"神技三：VSCode","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"附录：命名和项目结构规范","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"认识代码规范","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"先来思考两个问题：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"什么是代码规范？","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"为什么需要代码规范？","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你是一个经验丰富的前端开发，你一定接触过这样的老项目：变量名是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"abc","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"fds","attrs":{}}],"attrs":{}},{"type":"text","text":" 这种随意起的，或者是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"name1","attrs":{}}],"attrs":{}},{"type":"text","text":", ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"name2","attrs":{}}],"attrs":{}},{"type":"text","text":" 这种带数字起名，这样的变量不加注释，鬼都不知道它是干什么的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这类代码就是一种典型的不规范代码。这样的代码除了让我们开发人员情绪暴躁，最重要的问题是，它极大的降低了团队协作的效率和程序质量。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在团队协作过程中，当组内其他人需要使用或 review 你的代码，看到这种情况，除了喷你，还要花费大量时间了解你写的是什么。同时这样非常容易造成变量冲突，带来未知隐患，调试困难等问题，甚至可以看出一个程序员的编码态度和专业程度。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当然，代码规范包含很多方面，变量命名规范只是最基础的规范。不规范的地方越多，程序质量越低，团队协作的效率也就会越低。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"了解了不规范的代码以及不规范代码带来的问题，作为前端架构师，我们就要思考三个问题：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"如何制定规范？","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"如何统一团队的规范？","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"如何检测规范？","attrs":{}}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"制定和统一规范","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"像上面给变量随意乱起名字的情况，在早期的前端项目中非常常见。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因为早期项目规模，团队规模有限，没有命名规范这种意识，随意起名貌似也没有太大的问题，只要不重复就好。但是随着前端项目规模越来越大，复杂度越来越高，不规范带来的问题越来越多，这种规范意识才慢慢的被重视起来。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"经过社区的不断发展，协定了命名包含以下几种规范：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下划线命名：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user_name","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"中划线命名：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user-name","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"小驼峰命名：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"userName","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"大驼峰命名：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"UserName","attrs":{}}],"attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有了这些规范，开发者们起名字的时候心里就有谱了。而且这些规范目前也被大多数开发者们接受，如果不按照规范命名，很可能会被同事吐槽喽！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当规范成为普遍共识之后，大家按照自己的喜好使用不同的规范，逐渐形成了自己的编码习惯。在一个团队中，每个开发者往往各自有各自的编码习惯。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而这又成为了问题。再拿变量举例：一个团队中，有的人习惯用下划线命名变量，如 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user_name","attrs":{}}],"attrs":{}},{"type":"text","text":"；有的人习惯用驼峰命名变量，如 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"userName","attrs":{}}],"attrs":{}},{"type":"text","text":"。这两种命名方式都正确，都符合规范，但是会造成团队的代码风格混乱，无法统一。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那为什么要统一呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"统一的好处有很多。比如我们统一规定：","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"命名变量用下划线，命名方法用小驼峰","attrs":{}},{"type":"text","text":"。那么在团队协作时，大家看到下划线就知道这是一个变量，看到小驼峰就知道这是一个方法。十个人的代码写出来是一个人的风格，不需要了解其他的编码风格，实现无障碍协作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"十个人的代码写出一个人的风格，说起来很理想，但是靠监督和自觉实现几乎是不可能的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"怎么办呢？下面就是本文重点：","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"祭出实现代码规范的三招神技","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"神技一：ESLint","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面说到，团队协作开发项目，由于每个人的编码习惯不同，会写出各种各样的代码。这样的代码又乱又难以维护。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以我们希望有这样一个工具，可以制定一套比较完整全面的规范，如果大家的编码不符合规范，程序就会警告甚至报错，用这种工具来倒逼团队成员遵守统一的代码风格。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个工具是有的，我们都听过，就是大名鼎鼎的 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"ESLint","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ESLint 有两种能力：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"检查代码质量","attrs":{}},{"type":"text","text":"，如是否有已定义但未使用的变量。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"检查代码风格","attrs":{}},{"type":"text","text":"，换行，引号，缩进等相关的规范。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这两种能力几乎涵盖了绝大部分代码规范，并且具体规范是可配置的，团队可以定制自己喜欢的代码风格。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"定制规范后，项目运行或热更新时，ESLint 就会自动检查代码是否符合规范。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"问","attrs":{}},{"type":"text","text":"：ESLint 检查与 TypeScript 检查有啥区别？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"TypeScript 只会检查","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"类型错误","attrs":{}}],"attrs":{}},{"type":"text","text":"，而 ESLint 会检查","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"风格错误","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"尝试 ESLint","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在项目下安装：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ npm install eslint --save-dev","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后运行命令初始化配置：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"eslint --init","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"eslint","attrs":{}}],"attrs":{}},{"type":"text","text":" 是一个交互式命令，可以上下切换选择适合项目的选项；完成会生成 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".eslintrc.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"基本配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":".eslintrc.json","attrs":{}},{"type":"text","text":" 的基本配置如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"env\": {\n \"browser\": true,\n \"es2021\": true,\n },\n \"extends\": [\n \"eslint:recommended\"\n ],\n \"parserOptions\": {\n \"ecmaVersion\": 12,\n \"sourceType\": \"module\",\n },\n \"rules\": {},\n};","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个基本配置包含了一套默认推荐的配置，定义在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"eslint:recommended","attrs":{}}],"attrs":{}},{"type":"text","text":" 这个扩展中。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"React 配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React 在默认配置的基础上，也有一套推荐的语法配置，定义在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"plugin:react/recommended","attrs":{}}],"attrs":{}},{"type":"text","text":" 这个插件中，如果你的前端框架是 React，要定义 eslint 规范，那么在基本配置上添加下面标记 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"+","attrs":{}}],"attrs":{}},{"type":"text","text":" 号的配置即可：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"env\": {\n \"browser\": true,\n \"es2021\": true\n },\n \"extends\": [\n \"eslint:recommended\",\n+ \"plugin:react/recommended\"\n ],\n \"parserOptions\": {\n+ \"ecmaFeatures\": {\n+ \"jsx\": true\n+ },\n \"ecmaVersion\": 12,\n \"sourceType\": \"module\"\n },\n+ \"plugins\": [\n+ \"react\"\n+ ],\n \"rules\": {\n }\n};\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"React + TS 配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"若要 React 支持 TS，还要加一些额外配置：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"env\": {\n \"browser\": true,\n \"es2021\": true\n },\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:react/recommended\"\n+ \"plugin:@typescript-eslint/recommended\"\n ],\n+ \"parser\": \"@typescript-eslint/parser\",\n \"parserOptions\": {\n \"ecmaFeatures\": {\n \"jsx\": true\n },\n \"ecmaVersion\": 12,\n \"sourceType\": \"module\"\n },\n \"plugins\": [\n \"react\",\n+ \"@typescript-eslint\"\n ],\n \"rules\": {\n }\n};\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"代码检查","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面定义好规范之后，我们现在来写一段代码，并执行规范检查。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"新建 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"index.js","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件，写入内容：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const a = '13'\nfunction add() {\n return '1'\n}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"从 js 角度讲，这两行代码是没问题的。然后我们运行检查命令：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ npx eslint index.js","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这时会在控制台看到报错：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"2:7 error 'a' is assigned a value but never used no-unused-vars\n4:10 error 'add' is defined but never used no-unused-vars\n\n2 problems (2 errors, 0 warnings)","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"错误的意思是变量 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"a","attrs":{}}],"attrs":{}},{"type":"text","text":" 和函数 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"add","attrs":{}}],"attrs":{}},{"type":"text","text":" 已声明但未使用，说明代码不符合约定的规范。这种异常也很常见，在脚手架构建的项目中使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm run dev","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm start","attrs":{}}],"attrs":{}},{"type":"text","text":" 时就会执行上面的检查命令。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"ESLint 规范","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面说过，ESLint 可以自定义检查规范，规范定义在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".eslintrc.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 配置文件的 rules 对象下。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如，定义规范，字符串必须使用双引号：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"rules\": {\n \"quotes\": [\"error\", \"double\"]\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"定义好之后，如果你的代码中字符串使用单引号，ESLint 就会报错。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"quotes","attrs":{}}],"attrs":{}},{"type":"text","text":" 表示引号规范，是众多规范中的一个，它的值是一个数组。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"数组第一项是错误级别，是以下 3 个值之一：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"\"off\" or 0","attrs":{}}],"attrs":{}},{"type":"text","text":" - 关闭规范","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"\"warn\" or 1","attrs":{}}],"attrs":{}},{"type":"text","text":" - 警告级别规范","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"\"error\" or 2","attrs":{}}],"attrs":{}},{"type":"text","text":" - 错误级别规范","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"数组第二项才是真正的规范，具体完整的规范参考 ","attrs":{}},{"type":"link","attrs":{"href":"https://eslint.bootcss.com/docs/rules/","title":"","type":null},"content":[{"type":"text","text":"这里","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打开上面的网页，打绿钩的表示是已配置的。需要自定义直接写在 rules 里即可。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"神技二：Prettier","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上一步我们用 ESLint 实现了规范的制定和检查。当开发人员完成一段代码保存时，项目会自动执行 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"eslint","attrs":{}}],"attrs":{}},{"type":"text","text":" 检查命令检查代码，检查到异常后输出的控制台，待开发人员修复异常后才能继续开发。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你配置的编码规范比较复杂和严格，比如字符串必须单引号，代码结尾必须用分号，换行必须是 2 个 tab 且不可以用空格。像这种很细的规范，大家开发过程中难免会有不符合，这个时候控制台就会频繁报错，开发人员就会频繁修复一个空格一个标点符号，时间久了异常烦人。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正因为如此，在脚手架生成的项目中虽然默认都开启了 ESLint，但是很多人使用不久后觉得烦人，效率低下，所以都手动关闭了 ESLint。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那么，有没有更高效的方法，让大家非常快捷的写出完全符合规范的代码呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"有，它便是第二招神技：Prettier","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Prettier 是当前最流行的代码格式化工具，它最主要的作用就是格式化代码。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"什么是格式化？上面我们用 ESLint 定制了编码规范，当检测到不规范的代码，提示异常，然后需要我们开发人员按照提示手动修复不规范的地方。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而格式化的威力，是将不规范的代码，按照规范","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"一键自动修复","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"听起来很振奋人心，我们来试一下。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在项目下安装：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ npm install prettier --save-dev","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后新建 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".prettierrc.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"singleQuote\": true,\n \"semi\": true\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个配置文件和上面 ESLint 下的 rules 配置作用一致，就是定义代码规范 ——— 没错，Prettier 也支持定义规范，然后根据规范格式化代码。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"列一下 Prettier 的常用规范配置：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"singleQuote\": true, // 是否单引号\n \"semi\": false, // 声明结尾使用分号(默认true)\n \"printWidth\": 100, // 一行的字符数，超过会换行（默认80）\n \"tabWidth\": 2, // 每个tab相当于多少个空格（默认2）\n \"useTabs\": true, // 是否使用tab进行缩进（默认false）\n \"trailingComma\": \"all\", // 多行使用拖尾逗号（默认none）\n \"bracketSpacing\": true, // 对象字面量的大括号间使用空格（默认true）\n \"jsxBracketSameLine\": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）\n \"arrowParens\": \"avoid\" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"定义好配置后，我们在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"index.js","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件中写入内容：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const a = \"13\"\nfunction add() {\n return \"1\"\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后在终端运行格式化命令：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ npx prettier --write index.js\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"格式化之后，再看 index.js 文件变成了这样：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const a = '13';\nfunction add() {\n return '1';\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看到变化了吧，双引号自动变成了单引号，行结尾自动加了分号，刚好与配置文件中定义的规范一致。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"喜大普奔！终于不用再手动修复不规范的代码了，一个命令就能搞定！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面是格式化一个文件，当然也支持批量格式化文件。批量格式化通过模糊匹配查找文件，比较常用，建议定义在 script 脚本中，如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// package.json\n\"scripts\": {\n \"format\": \"prettier --write \\\"src/**/*.js\\\" \\\"src/**/*.ts\\\"\",\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Prettier 还支持针对不同后缀的文件设置不同的代码规范，如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"semi\": false,\n \"overrides\": [\n {\n \"files\": \"*.test.js\",\n \"options\": {\n \"semi\": true\n }\n },\n {\n \"files\": [\"*.json\"],\n \"options\": {\n \"parser\": \"json-stringify\"\n }\n }\n ]\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"问","attrs":{}},{"type":"text","text":"：ESLint 与 Prettier 有啥区别？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相同点：都可以定义一套代码规范。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不同点：ESLint 会在检查时对不规范的代码提示错误；而 Prettier 会直接按照规范格式化代码。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"ESLint 和 Prettier 定义的规范要一致，不能冲突","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"神技三：VSCode","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面，我们通过 ESLint 和 Prettier 两招神技，实现了代码规范制定，代码规范检查，以及根据规范一个命令格式化代码，使得统一团队代码风格变的非常容易。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而，突破效率的挑战是没有极限的。这时候又有小伙伴发声了：虽然是容易了，但是检查代码还是得依赖检查命令，格式化代码也得依赖格式化命令，这样总显得不够优雅。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好吧，不够优雅，那还有优雅的解决方案吗？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"答案是有。","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"它就是我们的第三招神技 —— VSCode","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"强大的插件","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"VSCode 对我们前端来说都不陌生，是我们日日相伴的开发武器。当前 VSCode 几乎统一了前端圈的编辑器，功能强大，倍受好评。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"既然能得到如此广泛的认可，那么就必然有它的优越性。VSCode 除了轻量启动速度快，最强大的是其丰富多样的插件，能满足不用使用者各种各样的需求。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在众多插件中，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ESLint","attrs":{}}],"attrs":{}},{"type":"text","text":" 就是非常强大的一个。没错，这个插件就是我们前面说到的神技第一招 ESLint 在 VSCode 上支持的同名插件。截图如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/67/676de1241a86fa7f21d1c2017bb2c845.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安装了这个插件之后，之前需要在终端执行 eslint 命令才能检查出来的异常，现在直接标记在你的代码上了！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"即使是你敲错了一个符号，该插件也会实时的追踪到你错误的地方，然后给出标记和异常提醒。这简直大大提升了开发效率，再也不用执行命令来检查代码了，看谁还说不优雅。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"既然编辑器有 ESLint 插件，那是不是也有 Prettier 插件呢？猜对了，当然有插件，插件全名叫 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Prettier - Code formatter","attrs":{}}],"attrs":{}},{"type":"text","text":"，截图如下，在 VSCode 中搜索安装即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fe/feed0f29c98a0cddaf70f02d2a981c90.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Prettier 插件安装之后会作为编辑器的一个格式化程序。在代码中右键格式化，就可以选择 Prettier 来格式化当前代码。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果要想 Prettier 实现自动化，则还需要在编辑器中配置。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"编辑器配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"VSCode 中有一个用户设置 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"setting.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件，其中保存了用户对编辑器的自定义配置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个配置非常丰富，详见","attrs":{}},{"type":"link","attrs":{"href":"https://code.visualstudio.com/docs/getstarted/settings","title":"","type":null},"content":[{"type":"text","text":"官网","attrs":{}}]},{"type":"text","text":"。首先我们在这个配置当中将 Prettier 设置为默认格式化程序：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"设置好这一步之后，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"重点来了！","attrs":{}},{"type":"text","text":" 我们再来配置保存文件自动格式化：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"editor.formatOnSave\": true\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配好之后，神奇的事情发生了：当你写完代码保存的时候，发现你正在编辑的文件立刻被格式化了。也就是说，无论你的代码按不按照规范写，保存的时候自动帮你格式化成规范的代码。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这一步其实是保存文件的时候自动执行了格式化命令。因为我们上面配置了默认格式化程序为 Prettier，现在又配了保存时格式化，相当于将文件保存和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"prettier","attrs":{}}],"attrs":{}},{"type":"text","text":" 命令连接了起来。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"到这一步，在三大神技的加持之下，我们已经实现了代码的自动检查与自动格式化，现在你编码的时候不需要考虑什么格式规范的问题，只要正常保存，编辑器会自动帮你做好这些事情。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"共享编辑器配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面我们在编辑器经过一顿配置，终于实现了自动格式化。现在我们要把这些设置同步给团队内的其他成员，该怎么办，难道要一个一个再配一遍？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"别慌，不用这么麻烦。VSCode 的设置分为两类：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用户设置：应用于整个编辑器","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"工作区设置：应用于当前目录/工作区","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这两类的配置内容是一模一样的，区别只是优先级的问题。如果你打开的项目目录包含工作区设置，那么这个工作区设置会覆盖掉当前的用户设置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以要想将设置同步给团队内的其他成员，我们不需要去改动用户设置，只需要在项目目录下新建一个工作区设置即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加工作区设置方法：在项目根目录下新建 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".vscode/setting.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件，在这里写需要统一的编辑器配置。所以我们把上面的 Prettier 配置写在这里即可实现共享。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"附录：命名和项目结构规范","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面介绍了代码规范，代码检查和代码格式化，统一代码风格已经很全面了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在团队开发过程当中，我们也积累了一些并不会写在配置文件里的规范，这些规范在一个团队当中也是非常重要。这部分算是我们的团队规范的分享吧。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主要说两部分：命名规范和项目结构规范。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"命名规范","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"命名规范，文章开头也说了，变量的四种命名规范。但是什么地方用哪种规范，我们也是有约定的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"变量命名：下划线 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user_id","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS-Class 命名：中划线 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user-id","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"方法函数命名：小驼峰 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"userId","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JS-Class 命名：大驼峰 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"UserId","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"文件夹命名：中划线 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user-id","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"文件夹下组件命名：中划线 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"user-id","attrs":{}}],"attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"组件导出命名：大驼峰 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"UserId","attrs":{}}],"attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"项目结构规范","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"项目结构规范主要是指 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"src","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件夹下的结构组织。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"|-- src\n |-- index.tsx # 入口文件\n |-- assets # 静态资源目录\n |-- components # 公共组件目录\n | |-- header\n | | |-- index.tsx\n | | |-- index.less\n |-- stores # 状态管理目录，与 pages 结构对应\n | |-- admins\n | | |-- index.tsx # 状态文件\n | | |-- types.ts # 定义状态类型\n | |-- index.tsx\n |-- pages # 页面目录，与 stores 结构对应\n | |-- admins\n | | |-- index.tsx\n | | |-- index.less\n |-- request\n | |-- index.ts # axios 实例，全局请求处理\n |-- router\n | |-- home.tsx\n | |-- index.tsx\n | |-- root.tsx\n |-- styles # 全局样式\n | |-- common.less\n | |-- index.less\n |-- utils # 工具目录\n |-- index.ts\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果喜欢我的文章，请点赞支持我吧！也欢迎关注我的专栏，感谢🙏🙏","attrs":{}}]}]}