为什么要建立代码规范呢?
增强团队协作效率
每个工程师都有自己主观的编程风格,但作为一个团队,必须在可读性上找到最大公约数。
提高代码质量
很多优秀的编码习惯,应该沉淀下来成为一个团队的【军规】而不是工程师个人的选择
减缓系统腐化的速度
一个工程总会腐化,但在保持可读性和代码质量的情况下,我们可以减慢它的速度
建立代码规范需要建立什么原则?
代码规范是一个找公约数的过程
需要听取团队每一位成员的意见,除了会引起质量问题的编码习惯,其他意见都值得被尊重
本着可读性第一的目标
代码规范是为了帮助人与人之间的协作,可读性应该是第一目标
循序渐进的建立规范
代码规范不应成为工程师工作之外的负担,建立规范的过程可以求同存异,小步快跑
在 HTML
和 CSS
方面比较著名的有:
但是,由于 MVC/MVVM
框架的的出现,比如说 Vue
和 React
,纯的 HTML/CSS
的我们已经很少写了,我们现在一般只把它们当做最佳实践。不需要严格的遵守,可以了解一下其中背后的思想和原理
JavaScript
方面规范有:
Airbnb JavaScript
规范JavaScript Standard Style
框架相关:
ESLint
是一款高度可配置的 JavaScript
静态代码检验工具,已成为 JS
代码检查的事实标准
特性
rule
之间都是独立的原理
parser
)将 JavaScript
代码解析为抽象语法树(AST
),再调用规则(rule
)对 AST
进行检查,从而实现对代码的检查AST浅析
AST
是一种可遍历的、描述代码的树状结构,利用AST可以方便地分析代码的结构和内容。
可以从这个网站查看AST长什么样 AST ExploreESLint的使用
ESLint
的使用可以通过 ESLint CLI
# 全局安装 npm i -g eslint # -h参数查看用法 eslint -h
除了CLI之外,ESLint还提供了编辑器的集成以及构建工具的集成
VS Code
/ Atom
/ Vim
/ Sublime Text
提供了在写代码的同时就可以实时进行代码检查Webpack
/ Rollup
/ Gulp
/ Grunt
提供了在构建过程中进行代码检查ESLint的配置
JavaScript
,JSON
或者 YAML
,也可以在 package
, json
中的 eslintConfig
字段配置Prettier介绍
Prettier
是一个流行的代码格式化工具
Prettier
称,自己最大的作用是:可以让大家停止对“代码格式”的无意义的辩论
Prettier
在一众工程化工具中非常特殊,它毫不掩饰地称自己是“有主见的”,且严格控制配置项的数量,它对默认格式的选择,完全遵循【让可读性更高】这一标准。
Prettier
认为,在代码格式化方面牺牲一些灵活性,可以为开发者带来更多的收益。不得不承认,Prettier
是对的。
Prettier vs Linters
Linters规则分两类 1. 格式优化类,max-len,no-mided-spaces-and-tabs,keyword-spacing,comman-style... 2. 代码质量类:no-unused-vars,no-extra-bind,no-implicit-globals,prefer-promise-reject-errors...
Prettier
只关注第一类,且不会以报错的形式告知格式问题,而是允许开发者按自己的方式编写代码,但是会在特定时机(save
,commit
),将代码格式化为可读性最好的形式。
prettier的配置
prettier
可以通过 .prettierc
.prettierrc.json
.prettierrc.js
或者 .prettierrc.yml
配置
{ "useTabs": false, // 使用tab缩进还是空格缩进,选择false; "tabWidth": 2, // tab是空格的情况下,是几个空格,选择2个; "printWidth": 80, // 当行字符的长度,推荐80,也有人喜欢100或者120; "singleQuote": true, // 使用单引号还是双引号,选择true,使用单引号; "trailingComma": "none", // 在多行输入的尾逗号是否添加,设置为 `none`,比如对象类型的最后一个属性后面是否加一个; "semi": false // 语句末尾是否要加分号,默认值true,选择false表示不加; }
prettier的使用
有很多方式可以去触发 Prettier
的格式化行为:CLI
、Watch Changes
、git hook
、与 Linter
集成
package.json{ "scripts": { "prettier-watch": "onchange '**/*.js -- prettier --write {{changed}}'" } }
npm install -D eslint-config-prettier eslint-plugin-prettier
eslint-config-prettier
会禁止 ESLint
中与 prettier
相冲突的规则
eslint-plugin-prettier
让 ESLint
根据 prettier
的规则去检查代码,所有与代码格式有关的错误,ESLint
全听 prettier
的。
.eslintrc.json{ "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } }
本文作者:叶继伟
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!