序文
Prettier は、vscode のコードをフォーマットするプラグインです。以前、vscode でお気に入りのコーディング スタイルを設定しましたが、同僚がプロジェクトを受け取った後、フォーマットが乱雑になってしまいました。最近、私は同僚のプロジェクトを引き継ぎ、同僚が編集者を超えても同じコーディング スタイルを維持できるようにコーディング スタイルを統一することにしました。操作方法が分からない方もいると思いますので、具体的な操作方法を書いておきますが、実はとても簡単です。
最初の一歩
Prettier プラグインをダウンロードします。もちろん、同僚もダウンロードする必要があります
ステップ2
ルート ディレクトリに新しい .prettierrc.js ファイルを作成し、書式設定スタイルを構成します
// 参考配置
module.exports = {
"arrowParens": "always",//箭头函数的参数无论有几个，都要括号包裹
"bracketSameLine": true, //在多行元素的最后一行放置 > 符号，而不是单独一行
"bracketSpacing": true, //在对象中的括号之间打印空格`{x: 1}` 格式化为 `{ x: 1 }`
"embeddedLanguageFormatting": "auto",// 是否格式化一些文件中被嵌入的代码片段的风格，如果插件可以识别。
"htmlWhitespaceSensitivity": "css",// 指定 HTML 文件的全局空白敏感度。影响空白字符是否影响布局。
"insertPragma": false,// 在文件的顶部插入一个特殊的 @format 标记，指定文件格式需要被 Prettier 格式化。
"jsxSingleQuote": false,//jsx 语法是否单引号
"printWidth": 200,//单行代码最长字符长度，超过之后会自动格式化换行。
"proseWrap": "preserve",// 指定如何处理 markdown 文本的换行。（always | never | preserve）
"quoteProps": "as-needed",// 对象属性是否使用引号包裹。（as-needed | consistent | preserve）
"requirePragma": false,// 只有在文件顶部包含了特殊的 @format 标记时，才格式化文件。
"semi": true,//分号是否添加
"singleAttributePerLine": false,// 是否将每个 JSX 属性放在单独的一行上。
"singleQuote": false,//是否单引号
"tabWidth": 4,// 指定每个缩进级别的空格数。
"trailingComma": "none", //对象的最后一个属性末尾是否添加 `,`
"useTabs": true,// 是否使用制表符（tab）缩进。
"vueIndentScriptAndStyle": false,// 是否缩进 Vue 文件中的代码<script>和<style>标签
"endOfLine": "lf",// 与 `.editorconfig` 保持一致设置。指定换行符样式。（lf | crlf | cr | auto）
}
第三段階
デフォルトの書式設定プラグインを設定します。この手順は非常に重要です。そうしないと、書式設定を半日行っても書式設定ツールが正常に動作しなくなります。
「デフォルトの書式設定ツールの構成」を選択し、「Prettier」を選択します。
やっと
統一されたコーディング スタイルを維持するには、全員がデフォルトの書式設定ツールを Prettier に設定し、コードをコミットしてプッシュし、同僚にプルダウンしてもらう必要があります。
要約する
Prettier は vscode の settings.json で設定できます。プロジェクトごとに .prettierrc.js ファイルを置く必要がないという利点がありますが、同僚間でコーディング スタイルが統一されなくなります。それぞれに 1 つずつ置くことをお勧めします。問題は、少し面倒ですが、共同作業するときに、同僚がコードをフォーマットすることを心配する必要がなくなることです。