手把手教DIY Prettier 格式化配置，并使用Github Action 实现自动化发布npm包

Briver
1,490 阅读3分钟

本篇文章我将教你如何DIY一个自己的 Prettier 配置，并使用 Github Action 实现自动化发包，如果你不了解这两个知识点，以下是它俩的官网：

生成自己的代码格式化配置

我们可以使用官方提供的 playground 生成

image.png

playground： prettier.io/playground/

通过左边的配置选项调整好之后，点击左下角的 Copy config JSON，然后就可以生成 JSON 了

仓库代码部分

目录结构:

|____.github
| |____workflows
| | |____main.yml
|____index.json 
|____package.json
|____README.md
  1. 执行 npm init 初始化 package.json文件
//package.json
{
  "name": "@briver/prettier-config", // 这里改为自己的npm包名，注意，不要重复
  "version": "1.0.0", // 版本信息
  "main": "./index.json", // main 关键字描述的是，import 导入的文件
  "description": "My personal Prettier config", // 描述信息
  "repository": "git@github.com:briver0825/prettier-config.git", // 仓库地址
  "author": "Briver", // 作者名称
  "license": "MIT" // 开源协议
}
  1. 将生成的 prettier 配置保存在 index.json 中
{
	"arrowParens": "always",
	"bracketSameLine": false,
	"bracketSpacing": true,
	"embeddedLanguageFormatting": "auto",
	"htmlWhitespaceSensitivity": "css",
	"insertPragma": false,
	"jsxSingleQuote": true,
	"proseWrap": "preserve",
	"quoteProps": "as-needed",
	"requirePragma": false,
	"semi": false,
	"singleAttributePerLine": true,
	"singleQuote": true,
	"tabWidth": 4,
	"trailingComma": "es5",
	"useTabs": false,
	"vueIndentScriptAndStyle": false,
	"printWidth": 80
}

那么到这里仓库就准备就绪

发布 npm 包

1.修改回 npm 源

npm set https://registry.npmjs.org

2. 登录 npm

npm login

3. 发布 npm 包

npm publish

如果是 @xxx/xxx的包名，需要使用以下命令

npm publish --access public

这里提几个注意事项：

  • 包名必须是未使用的
  • 必须使用 npm 官方源
  • 每次发布的版本必须是最新的，例如我现在是1.0.0，我要更新发布了,需要修改版本为 1.0.1
  • 如果发布的是 @xxx/xxx的包名，需要指定为公开的

使用 Github Action 实现自动化发包

每次更新代码都需要手动发布 npm 包，这非常繁琐，我们可以使用 Github Action 简化这个步骤

  1. 创建 aciton配置文件

    打开仓库，进入Action选项

image.png

image.png

这里我把 main.yml 文件准备好了

name: Publish Package to npmjs

on:
  push:
    branches: [ main ]
    
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16.x'
          registry-url: 'https://registry.npmjs.org'
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

这里解释一些字段：

  • branches: 这个字段用来配置监听的分支，被监听的分支发生push操作的时候会执行这个action
  • runs-on: 执行环境
  • run: 执行的命令
  • env: 环境变量配置

  1. 配置 npm token

    进入 npm 官网，找到 settings > Access Tokens 选项，新建 token 并复制

image.png

在 Github 仓库中配置环境变量

仓库 > settings > Security > Secrets and variables > Actions

image.png

然后进入 Action 中重新运行即可

image.png

使用

使用也很简单，直接安装写好的包就好了

npm install prettier @briver/prettier-config -D

然后在 package.json 中加入一行

"prettier": "@briver/prettier-config"

我使用的是 vscode，安装 prettier 插件

image.png

然后在 vscode 中配置默认格式化程序为 prettier 就可以了

结束

本文手把手教大家 DIY 了一个自己的 prettier 配置，在之后的工作中你就可以直接通过 npm install 的方式导入配置了，至于为什么不用 eslint，因为 eslint 会报一些红， 如果个人开发的话很棒，但是如果多人开发就需要大家一起遵守这个配置，需要有一个较好的团队。我现在就是多人开发，但是大家没有一个好的开发规范，这个不好落实，所以就自己使用 prettier 就行了。

欢迎大家评论区留言，感谢你的观看，如果对你有帮助的话，请不要吝啬你的赞👍，这将会鼓励我更好的持续输出。

avatar
文章
阅读
粉丝