摘要：项目编码规范化工具工具代码校验工具，让代码更一致和避免。在配置文件到项可对单条规则一一进行改写。以下以项目需校验文件为例参考链接一步一步，统一项目中的编码规范
Web 项目编码规范化工具 工具 ESLint
The pluggable linting utility for JavaScript and JSX
代码校验工具（linting utility），让代码更一致和避免 bug。
PrettierPrettier is an opinionated code formatter.
支持 JavaScript · TypeScript · Flow · JSX · JSON · CSS · SCSS · Less · HTML · Vue · Angular ·GraphQL · Markdown · YAML 等文件的格式化。
代码格式化工具（code formatter），少数服从多数，任性的风格统一，来确保所有输出的代码符合一致。
集成编辑器与终端集成，以便开发时代码不规范及语法错误时，编辑器与终端都将信息暴露给用户，以方便查看与及时解决问题。项目集成 代码格式化过程
终端下发出格式化命令 ☟
ESLint 收到命令 ☟
ESLint 读取项目目录下的 ESLint 配置文件 ☟
如果配置文件里面有 Prettier ☟ 插件则读取项目目录下的Prettier配置文件，反之则跳过该步骤 ☟
ESLint 发出格式化命令 ↺
Prettier 配置安装 prettier 包。
项目根目录下添加配置.prettierrc文件。
ESLint 配置安装 eslint 包。
安装项目特定语法校验规则eslint扩展插件，如Vue项目eslint-plugin-vue,React项目eslint-plugin-react、eslint-plugin-react-hooks 等。
安装 eslint-plugin-prettier 集成 prettier 语法规则，安装 eslint-config-prettier 解决 prettier 与其他规则等冲突问题。
项目根目录下添加配置.eslintrc文件。
将上述等插件及扩展规则添加到配置文件，才会生效。在配置文件到rules项可对单条规则一一进行改写。
项目完整配置参考React 项目集成
Vue 项目集成
编辑器集成 安装插件以 VSCode 为例，其他编辑器类似。
ESLint插件 - VS Code ESLint extension
Prettie 插件 - Prettier Code Formatter
如果项目是 Vue 工程，再安装一个插件 Vetur : 为 Vue 框架提供语法高亮、代码片段、Emmet、格式化、代码风格检查、智能提示、调试帮助等。vetur 文档。
配置可参考这篇文章或网上有很多配置教程可查阅，此处不在重复诉述。保证插件格式化与脚本格式化命令结果一致即可。
代码格式化 格式化单文件当某个文件当代码不规范时，可用编辑器安装当插件进行格式化代码。
配置使用 Prettie 插件格式化文件，保证插件格式化与以下脚本格式化命令结果一致。
格式项目下文件当想校验工程目录下当所有代码时，可填配脚本格式化命令，例如提交代码之前添加Hooks校验代码。
填配脚本格式化命令，使用 ESLint 校验代码并格式化不规范代码。以下以 React 项目需校验文件为例：
"scripts": {
"lint": "eslint --ext tsx,ts,js,jsx src",
"lint-fix": "eslint --fix --ext tsx,ts,js,jsx src",
},
参考链接
Prettier your project
一步一步，统一项目中的编码规范（vue, vscode, vetur, prettier, eslint）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104966.html
摘要：根据基于的项目构建一所描述的，建立了项目的基本目录结构，接下来的工作便是编码，编译，测试，发布。对于自己，仅作文去尝试清楚的阐述自己构建项目的一些实践。随意的编码风格最终导致项目代码的可维护性低，新加入成员学习成本提高。 根据 基于koajs的web项目构建（一） 所描述的，建立了项目的基本目录结构，接下来的工作便是编码，编译，测试，发布。做为这些工作，每一项工作都有自己的学问，针对这...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：杂项用代替里一定要有的判断不要在内置对象的原型上添加方法，如不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数，记得将其赋值给某个变量不要在同个 决定综合网上的规范整出一套自己的开发规范出来，以后代码的风格均按照要求来编排，方便管理维护 一、 命名规范 项目命名：全部采用小写方式， 以下划线分隔，例：my_pro...
摘要：杂项用代替里一定要有的判断不要在内置对象的原型上添加方法，如不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数，记得将其赋值给某个变量不要在同个 决定综合网上的规范整出一套自己的开发规范出来，以后代码的风格均按照要求来编排，方便管理维护 一、 命名规范 项目命名：全部采用小写方式， 以下划线分隔，例：my_pro...
阅读 1249·2021-11-12 10:35
阅读 1422·2021-08-03 14:02
阅读 2444·2019-08-30 15:55
阅读 1875·2019-08-30 15:54
阅读 599·2019-08-30 14:01
阅读 2299·2019-08-29 17:07
阅读 2126·2019-08-26 18:37
阅读 2848·2019-08-26 16:51
