项目代码的格式化统一配置 Prettier & ESLint

Yu_Huang 发布于2019-08-26 12:19 / 1547人阅读

摘要：以前没时间过，每次项目编辑器的插件就关掉，老项目都没注意过相关的代码规范，这次新项目加入进去实践下三个插件功自动有些规则是冲突的，需要确定优先顺序，其他插件进行自定义化的配置都可以自动保存格式化的功能用和写出高质量代码在中对两者进行配置使用

以前没时间过eslint，每次项目vscode 编辑器的eslint插件就关掉eslint，老项目都没注意过相关的代码规范，这次新项目加入进去实践下！

Question

三个插件功自动有些规则是冲突的，需要确定优先顺序，其他插件进行自定义化的配置

都可以自动保存格式化的功能

Reference

用 ESLint 和 Prettier 写出高质量代码

在package中对两者进行配置

使用ESLint ＆ Prettier美化Vue代码

相对官方的文档，感觉没讲清楚

Integrating with ESLint

对优先使用了Pretiter规则还是esLint都给出了解决方案，并给出了推荐的设置

Answer 方案 1

最简单的，Integrating with ESLint 中最后的recommend的方案：

yarn add --dev eslint-plugin-prettier eslint-config-prettier

.eslintrc.json 配置中添加

{
  "extends": ["plugin:prettier/recommended"]
}

简单 so easy！

方案 2

npm i -D eslint-plugin-prettier

package.json中添加配置：

"eslintConfig": {
  "extends": [
    "prettier"
  ],
  "plugins": [
    "prettier"
  ]
},
"prettier": {
  "singleQuote": true,
  "semi": false
},

Different

两者的区别在于是否使用单引号和行末尾是否有分号，第二种eslint报错不会自动修复

Recommend integrating with editor

配置编辑器的 formatOnSave 设置，保存后自动化格式检测，列出vscode的配置， Reference

{
  "prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true
}

vscode编辑器中相关的插件：

Prettier - Code formatter

EditorConfig for VS Code

ESLint

暂时没涉及到editconfig 后面用到在添加

idc机房托管私有云 java配置统一管理 webrtc 互动直播连麦的项目代码腾讯云服务器镜像统一配置 Prettier

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108475.html

代码风格统一：commitlint &amp; eslint &amp; standard-vers

摘要：配置添加包配置此处如果不使用需要将替换为效果代码提交的格式不符合标准就会直接被拒绝。 Commitlint 配置添加包 yarn add @commitlint/cli @commitlint/config-conventional husky -D 配置package.json husky: { hooks: { // 此处如果不使用husky 需要将H...

lieeps 2019-08-23 13:54 评论0 收藏0
更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题

摘要：整个代码检查和格式化流程应该规范为如下步骤使用并且尝试自动修复所有问题有提示，可以进行修复，按照配置文件来进行修复。参考文档如何花分钟解决产生的各种错误的记忆现场本文转载自我的更新版梳理前端开发使用和来检查和格式化代码问题更新版，之前的版本可以看这里：梳理前端开发使用eslint和prettier来检查和格式化代码问题一、问题痛点在团队的项目开发过程中，代码维护所占的时间比重...

GitChat 2019-08-26 12:02 评论0 收藏0
梳理前端开发使用eslint-prettier检查和格式化代码

摘要：梳理前端开发使用检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。使用格式化所有代码。参考文档如何花分钟解决产生的各种错误的记忆现场原文转载梳理前端开发使用检查和格式化代码线上猛如虎，线下怂如鼠梳理前端开发使用eslint-prettier检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。因此编...

yangrd 2019-08-22 17:01 评论0 收藏0
Web 项目编码规范化工具

摘要：项目编码规范化工具工具代码校验工具，让代码更一致和避免。在配置文件到项可对单条规则一一进行改写。以下以项目需校验文件为例参考链接一步一步，统一项目中的编码规范 Web 项目编码规范化工具工具 ESLint The pluggable linting utility for JavaScript and JSX 代码校验工具（linting utility），让代码更一致和避免 bug...

meislzhua 2019-08-23 18:17 评论0 收藏0
用eslint + prettier + pre-commit管理项目(React)

摘要：前言人是很懒惰的，你刚开始建立的一个规规整整的项目，可能一段时间过后，就回被你无数次的提交代码弄得凌乱不堪。前言人是很懒惰的，你刚开始建立的一个规规整整的项目，可能一段时间过后，就回被你无数次的提交代码弄得凌乱不堪。就算你能保证你的编码风格严谨统一，别人又该如何，每个人都有不一样的编码风格，要保持统一，就要对项目进行适当的管理正文接下来介绍个React项目简单管理的一个实践： ...

endiat 2019-08-23 10:38 评论0 收藏0