prettierはどのように設定しますか?
1819 ワード
Prettierとは
Prettierは、JS/JSX/TS/Flow/JSON/CSS/LSSなどのファイルフォーマットをサポートするコードフォーマットツールです.
なぜPrettierを使うのか
lintの代わりに、セミコロン/tabインデント/スペース/引用符など、lintツールで問題が検出された後、手動で修正する必要がありますが、通常、このようなエラーはスペースや記号などであり、相対的に優雅ではなく、フォーマット化ツールを使用して自動的に時間と労力を節約します.
構成のカスタマイズ方法
Prettierはデフォルトの構成を提供しています.では、構成項目をどのように変更するかは、私たちのコード仕様に合っています.3つの方法があります.
(1).prettierrcファイル
(2)prettier.config.jsファイル
(3)package.jsonでprettierプロパティを構成する
Prettierはプロファイルをチェックして自動的にファイルの構成を読み込みます.私たちは1つの方法を選んで構成すればいいです.私は今2つ目を選んでいます.
lintツールに似ているような感じがしますよね?
構成可能なプロパティ
プロファイルを共有
Prettierは、JS/JSX/TS/Flow/JSON/CSS/LSSなどのファイルフォーマットをサポートするコードフォーマットツールです.
なぜPrettierを使うのか
lintの代わりに、セミコロン/tabインデント/スペース/引用符など、lintツールで問題が検出された後、手動で修正する必要がありますが、通常、このようなエラーはスペースや記号などであり、相対的に優雅ではなく、フォーマット化ツールを使用して自動的に時間と労力を節約します.
構成のカスタマイズ方法
Prettierはデフォルトの構成を提供しています.では、構成項目をどのように変更するかは、私たちのコード仕様に合っています.3つの方法があります.
(1).prettierrcファイル
(2)prettier.config.jsファイル
(3)package.jsonでprettierプロパティを構成する
Prettierはプロファイルをチェックして自動的にファイルの構成を読み込みます.私たちは1つの方法を選んで構成すればいいです.私は今2つ目を選んでいます.
lintツールに似ているような感じがしますよね?
構成可能なプロパティ
プロファイルを共有
`module.exports = {`
`// tab , 2`
`tabWidth: 2,`
`// tab , false`
`useTabs: true,`
`// , true`
`semi: false,`
`// , false( jsx , )`
`singleQuote: true,`
`// , none, none|es5|all`
`// es5 es5 、 `
`// all `
`TrailingCooma:` `"none"``,`
`// true`
`// true: { foo: bar }`
`// false: {foo: bar}`
`bracketSpacing: true,`
`// JSX false`
`// false: `
`// true: `
`jsxBracketSameLine:false,`
`// avoid avoid| always`
`// avoid x => x`
`// always `
`arrowParens:` `'always'``,`
`}`