@stdex/presets-prettier 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 安坚实
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,47 @@
-# Temporary Holding Version
+# 通用 Prettier 配置
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## 如何使用
+
+1、安装依赖
+
+```shell
+pnpm add --save-dev @stdex/presets-prettier
+```
+
+此包已包含 Prettier 依赖，无需再手动添加。
+
+2、引用配置  
+在 `package.json` 中添加 `"prettier": "@stdex/presets-prettier/prettierrc"`，  
+或在项目根目录建立 `.prettierrc.js` 文件：
+
+```js
+module.exports = '@stdex/presets-prettier/prettierrc'
+```
+
+## 配置 VSCode
+
+1、VSCode 安装 `Prettier` 插件
+
+2、VSCode 配置里指定如下内容：
+
+```json
+"editor.formatOnSave": true,
+
+// 可按需添加其他类型。
+// 或直接设置成所有文件类型的默认 { formatter：{ "editor.defaultFormatter": "esbenp.prettier-vscode" } }
+"[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+```
+
+3、也可以把此配置粘贴到 VSCode 配置里作为全局配置，这样临时项目也能应用格式化，格式如下：
+
+```json
+"prettier.printWidth": 100,
+"prettier.semi": false,
+"prettier.singleQuote": true,
+"prettier.arrowParens": "avoid",
+```
+
+### 格式化 wxml
+
+推荐 VSCode 下安装 `WXML - Language Service` 扩展，以更方便地编辑 wxml 文件。
+在 VSCode 配置里添加：`"minapp-vscode.wxmlFormatter": "prettier"` 以让其使用 Prettier 来格式化 wxml 代码。

package/package.json

@@ -1,6 +1,24 @@
 {
   "name": "@stdex/presets-prettier",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "通用 Prettier 配置",
+  "homepage": "https://github.com/anjianshi/stdex-packages/presets-prttier",
+  "bugs": {
+    "url": "https://github.com/anjianshi/stdex-packages/issues",
+    "email": "anjianshi@gmail.com"
+  },
+  "license": "MIT",
+  "author": "anjianshi <anjianshi@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "github:anjianshi/stdex-packages"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "dependencies": {
+    "prettier": "^3.8.1"
+  },
+  "prettier": "./prettierrc"
 }

package/plugin-jsx-element-parens.mjs

@@ -0,0 +1,73 @@
+/**
+ * 新增选项 jsxElementParens，值为 avoid 时去掉包裹 JSX 元素的括号。
+ *
+ * 这个括号是在 prettier/src/language-js/print/jsx.js 的 maybeWrapJsxElementInParens() 里加上的。
+ * 解决思路源自：https://github.com/prettier/prettier/issues/2724#issuecomment-1010212039
+ * 不过帖子里是 fork 了一个新 package，此处是通过插件来实现。
+ *
+ * 实现思路：
+ * 1. 在插件里自定义 `babel-plugin-ext` 和 `typescript-plugin-ext` 两个 parser，把 astFormat 都设置为 `estree-plugin-ext`。
+ *    prettier 会找与 parser 定义的 astFormat 同名的 printer 来执行格式化。
+ *
+ * 2. 在插件里自定义 `estree-plugin-ext` printer，使用修改过的 print() 函数。
+ *
+ * 3. 要求用户在 prettier 配置里，把 jsx 文件的 parser 设置为 `babel-plugin-ext`，tsx 文件的 parser 设置为 `typescript-plugin-ext`。
+ */
+import estreePlugin from 'prettier/plugins/estree.mjs'
+import typescriptPlugin from 'prettier/plugins/typescript.mjs'
+import babelPlugin from 'prettier/plugins/babel.mjs'
+
+export const options = {
+  jsxElementParens: {
+    category: 'JavaScript',
+    type: 'choice',
+    default: 'always',
+    description: 'Include parentheses around JSX Element.',
+    choices: [
+      {
+        value: 'always',
+        description: 'Always include parens.',
+      },
+      {
+        value: 'avoid',
+        description: 'Omit parens when possible.',
+      },
+    ],
+  },
+}
+
+export const parsers = {
+  'babel-plugin-ext': {
+    ...babelPlugin.parsers.babel,
+    astFormat: 'estree-plugin-ext',
+  },
+  'typescript-plugin-ext': {
+    ...typescriptPlugin.parsers.typescript,
+    astFormat: 'estree-plugin-ext',
+  },
+}
+
+export const printers = {
+  'estree-plugin-ext': {
+    ...estreePlugin.printers.estree,
+    print,
+  },
+}
+
+function print(path, options, print, args) {
+  const elem = estreePlugin.printers.estree.print(path, options, print, args)
+
+  if (
+    options.jsxElementParens === 'avoid' &&
+    (path.node.type === 'JSXFragment' || path.node.type === 'JSXElement') &&
+    elem.type === 'group' &&
+    elem.contents.length > 2 &&
+    elem.contents[0].type === 'if-break' &&
+    elem.contents[0].breakContents === '(' &&
+    elem.contents[1].contents.length >= 2
+  ) {
+    return elem.contents[1].contents[1]
+  }
+
+  return elem
+}

package/prettierrc.js

@@ -0,0 +1,37 @@
+const path = require('path')
+const packageDir = path.resolve(__dirname)
+
+// 只定义与默认值不同的项，完整列表见：https://prettier.io/docs/en/options.html
+module.exports = {
+  printWidth: 100,
+  semi: false,
+  singleQuote: true,
+  arrowParens: 'avoid',
+
+  // 来自插件的选项
+  jsxElementParens: 'avoid',
+  plugins: [path.join(packageDir, 'plugin-jsx-element-parens.mjs')],
+
+  overrides: [
+    {
+      files: ['*.html', '*.wxml'],
+      options: {
+        printWidth: 200,
+      },
+    },
+
+    // 使用插件自己定义的 parser 来处理文件
+    {
+      files: ['*.jsx'],
+      options: {
+        parser: 'babel-plugin-ext',
+      },
+    },
+    {
+      files: ['*.tsx'],
+      options: {
+        parser: 'typescript-plugin-ext',
+      },
+    },
+  ],
+}