Prettier 配备,并用 Github Action 实

本文我们将手把手教你DIY一个自己的 Prettier 配备，并用 Github Action 实现智能化分包，假如如果你不了解这俩知识要点，以下属于它俩的官方网站：

• Prettier: prettier.io/
• Github Action: github.com/features/ac…

形成自已的代码格式化配备

我们可以用官方网所提供的 playground 形成

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" // 开源协议
}

2. 将产生的 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选择项

这儿我将 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: 环境变量配置

2. 配备 npm token

   进到 npm 官方网站，寻找 settings > Access Tokens 选择项，新创建 token 并拷贝

在 Github 仓库里配置环境变量

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

再进入 Action 中再次运作就可以

应用

应用很简单，立即组装提前准备好的包就行了

npm install prettier @briver/prettier-config -D

之后在 package.json 里加入一行

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

我采用的是 vscode，组装 prettier 软件

之后在 vscode 中配备默认设置格式化硬盘程序流程为 prettier 就行了

完毕

文中手把手的教大伙儿 DIY 了一个自己的 prettier 配备，在之后的工作中中我们就能直接根据 npm install 的形式导进配备了，对于为什么不用 eslint，由于 eslint 会报一些红， 假如本人开发设计得话非常好，但如果多的人开发设计那就需要大家一起遵循这一配备，需要有一个较优秀的团队。我如今便是多的人开发设计，但大家并没有一个好的开发规范，这个不好贯彻落实，所以才自身应用 prettier 就可以了。

欢迎各位下方留言，感谢你的观看，假如对大家有所帮助得话，请不吝啬你赞