关山难越,谁悲失路之人;萍水相逢,尽是他乡之客。
百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程教程 > 技术文章 > 正文

代码风格公约-Node.js

guanshanw 2023-09-17 17:19 20 浏览 0 评论

目的

针对现有的代码,大家的风格都不太一致,写作开发的时候就会比较头疼,经常的问题就是采用Git flow开发进行代码merge的时候,尝尝因为格式的不一致导致有些问题,或者大家的开发工具,采用的格式又不一致,最简单的就是空格,有的设置4个,有的是2个,尝尝导致代码差异化非常的大,就此,我们决定去查找一个代码规范的工具来规范大家的代码。

现有项目使用的Node代码,决定采用eslint+prettier+ husky+lint-staged的方案来实现代码的风格统一。

代码风格公约-Node.js

友情提示:如果是新项目,那么在一开始就引入,那么就非常舒服了,如果是老项目,还是不太建议直接引入,在格式化代码的过程中可能会对老代码有一定的影响,我就遇到了,i18文件由于写的不规范,强制换行,导致了i18n文件不可读,出现了未知的错误。所以强烈建议新的项目引入。

安装依赖包

step 1 :安装依赖包

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier
npm install --save-dev eslint
npm install --save-dev eslint-config-prettier

在package.json添加执行脚本

"prettier": "prettier --write \"public/**/*.{js,jsx,ts,tsx,md,html,json}\"",

"check": "prettier --check \"public/**/*.{js,jsx,ts,tsx,md,html,json}\"",

直接采用npm run prettier就可以自动帮你把所有的代码都执行格式化处理,格式化配置的是所有public目录下的文件。

但是发现,比如lib目录下都是第三方安装包,我们需要忽略这些目录如何做

直接创建prettierignore文件,把需要过滤的文件夹目录配置进去。

.prettierignore

# Created by .ignore support plugin (hsz.mobi)
public/i18n
public/images
public/lib
public/themes
public/certificates
public/css
public/mock
.idea
.vscode
node_modules.tar.gz
devel_cert.pem
devel_key.pem
/bin
/Build
/node_modules

跑脚本的过程中,发现一个问题,那就是遗留的文件里面有非常多的错误提示,由于是老项目,之前关闭过eslint一段时间,然后引入了一些语法都是有问题的?混杂在我们的格式化中,如何在区分这些语法错误,可以执行下面的脚本,把错误的提示出来,但是不进行格式化修正。

 "check": "prettier --check \"public/**/*.{js,jsx,ts,tsx,md,html,json}\"",

引入了check命令,只会检测语法的问题,这就可以帮助我们先把语法错误全部解决,然后再处理格式化,这样主要是方便第一次出的时候区分代码跟格式化,正常情况下,你可以直抛npm run prettier。

自定义格式化配置

项目根目录下添加 .prettierrc 文件,具体配置可以自行添加

{
  "printWidth": 120, // 行宽120个字符
  "endOfLine": "auto"  //由于window空格是CRLF,linux下面是LF,这会造成不同系统下检测出来的空格有差异,auto是保存现状
}

如何采用工具保证代码的质量

1. 本地自动保存格式化

IDEA插件配集成

为了防止大家每次需要手动去跑这个脚本的繁琐,我们现在需要在我们的开发工具里面配置一下插件,这样就可以每次当时手动修改代码以后,点击ctrl+S保存文件的时候,自动跑format脚本,同时,每次pull新的代码的时候,也会自动fomratch出有问题的代码,所以如果有其他人提交了没有format的代码,你pull下来立马就会到出现在你的local changes列表里面。

1.prettier
2.Filer watcher (add javascript+html)

针对UI,需要配置两个prettier文件,一个javascript,一个html

VS code

https://github.com/prettier/prettier-vscode

2. 本地提交格式化,执行git commmit触发hook

Pre-commit Hook

通常项目中我们通过eslint和stylelint这些lint工具来检查代码的规范与否,保证良好的代码规范,从而在多人协作中保障项目质量和可维护性。正常我们会在提交代码前手动执行语法检查,而lint-staged和husky而让这一过程自动化,在git的pre-commit阶段来检测你的代码,如果存在语法错误会中断commit。

npm install --save-dev husky
npm install --save-dev lint-staged
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json}": "prettier --write"
  },

Refer:

https://www.meteorlxy.cn/posts/2019/08/05/understand-and-use-prettier.html

https://github.com/conventional-changelog/commitlint/#what-is-commitlint

相关推荐

七条简单命令让您玩转Git
七条简单命令让您玩转Git

凭借着出色的协作能力、快速部署效果与代码构建辅助作用,Git已经得到越来越多企业用户的青睐。除了用于开发商业及消费级应用之外,众多科学及政府机构也开始尝试使用这...

2023-10-07 12:14 guanshanw

基本完整的关于Git分支branch的操作
基本完整的关于Git分支branch的操作

Git使用背景项目中要用到dev或者其他分支开发完代码,需要将该分支合并到master的需求操作步骤下面以dev名称为lex为分支名为例来操作一遍客户端操作:...

2023-10-07 12:14 guanshanw

Git 进阶(合并与变基)
Git 进阶(合并与变基)

在Git中整合来自不同分支的修改主要有两种方法:合并(merge)以及变基(rebase)合并(merge)merge流程图merge的原理是找到这两个分...

2023-10-07 12:13 guanshanw

Git学习笔记 003 Git进阶功能 part5 合并(第一部分)

合并(merge)是很常用的操作。尤其是一个庞大的很多人参与开发的企业级应用。一般会设定一个主分支,和多个副分支。在副分支开发完成后,合并到主分支中。始终保持主分支是一个完整的,稳定的最新状态的分支。...

非标题党,三张图帮你理解git merge和git rebase的区别
非标题党,三张图帮你理解git merge和git rebase的区别

初始场景:基于正常的开发分支修改几个小bug,然后在合并到开发分支上。gitmergegitcheckoutfeaturegitmergeho...

2023-10-07 12:13 guanshanw

git 初次使用(01)
git 初次使用(01)

先从github上克隆代码下来:使用vscode克隆代码如下图,填写上github仓库地址:vscode有时候克隆代码速度比较慢,可以用命令行方式克隆gitc...

2023-10-07 12:12 guanshanw

Git 远程操作

4.Git远程操作命令说明gitremote远程版本库操作gitfetch从远程获取版本库gitpull下载远程代码并合并gitpush上传远程代码并合并4.1远程版本库操作gitre...

Git常用命令-总结
Git常用命令-总结

创建git用户$gitconfig--globaluser.name"YourName"$gitconfig--globaluser.em...

2023-10-07 12:12 guanshanw

git中删除从别人clone下来项目的git信息,并修改为自己的分支

如果你从别人的Git存储库中克隆了一个项目,并想要删除与该存储库相关的Git信息,并将其修改为你自己的分支,则可以执行以下步骤:使用gitclone命令克隆存储库:gitclone<u...

git系列-回滚和放弃本地修改

回滚历史提交就是reset的功能。这种情况是已经提交远程仓库,需要回滚到之前的提交。gitreset--hardcommitId//注:强制提交后,当前版本后面的提交版本将会删掉!gi...

GIT使用小技巧大全
GIT使用小技巧大全

在大型软件工程的开发过程中,版本控制是无法绕过去的;目前来说,最火的版本控制软件就是GIT了。早两年SVN比较火,不过被大神linus喷了几次后,就日落西山了,...

2023-10-07 12:11 guanshanw

git相关命令-上
git相关命令-上

这些命令都是看了文档后,个人觉得比较有用的一些,展示给大家。回到远程仓库的状态抛弃本地所有的修改,回到远程仓库的状态。gitfetch--all&...

2023-10-07 12:10 guanshanw

Git命令行接口:掌握Git的必备技能
Git命令行接口:掌握Git的必备技能

Git是一款强大的分布式版本控制工具,它支持命令行界面操作。熟练掌握Git命令行接口,是开发者使用Git的必备技能之一。在这篇文章中,我们将介绍Git命令行接口...

2023-10-07 12:10 guanshanw

Git命令详解
Git命令详解

相信各位小伙伴们应该都对git有一些了解,毕竟作为代码管理的神器,就算不是IT行业的小伙伴肯定也或多或少的听说过一些。今天就来和小伙伴们分享一下自己总结的常用命...

2023-10-07 12:10 guanshanw

工作7年收集到的git命令
工作7年收集到的git命令

概念git中的术语解释:仓库也叫版本库(repository)stage:暂存区,add后会存到暂存区,commit后提交到版本库git安装linux...

2023-10-07 12:10 guanshanw

取消回复欢迎 发表评论: