VSCode に付属する Format 関数を使用するだけで、構成可能なコードのフォーマットのニーズに対応できます。 VSCodeのFormat機能については以下の記事で紹介していますので、ご参考になれば幸いです!
#近年、開発環境ではコードの標準化にますます注目が集まっており、ツールを使用してチェックし、自動的に修復することがコード保証の第一の選択肢となっています。 。
通常は、Lint (ESLint StyleLint)
や Prettier
などの補助ツールを使用します。簡単な構成と展開を通じて、いくつかの一般的なコード スタイル仕様を使用して目的を達成できます。自動プロンプト、自動修復、自動実行および監視。
しかし、次の状況に遭遇したかどうかはわかりません:
IDE でコードを入力するとき、リアルタイム形式がないため (通常は自動的に保存時にフォーマットされます)、赤いプロンプトが常に表示され、いつも文法が間違っていると思いますが、実際にはフォーマットされていないだけです。 (例: ESLint プラグインの自動検証プロンプト)
初めて使い始めたときは、いつも理解できないルール (おそらく厳しすぎる) に遭遇しました。その具体的な理由は、それが開発中にルールを学ぶことに等しいからです。
コードを書いたところ、保存後、コードが突然長くなり、すべての行が折り返され、50 行のコードが突然 100 行に伸びてしまいました。 ここでは誰の名前も出しません。
コード仕様に関する要件はそれほど多くありません (フォーマットに関することの方が多いです)。たとえば、プロジェクトが比較的小さい、プロジェクトのスケジュールが比較的厳しいなどです。 基本的な書式設定の要件を満たしている限り。
特に最後のプロジェクトです。実際、多くの小規模プロジェクトでは、最も基本的なフォーマットを満たすだけで済み、チームが一連の簡単な仕様を確実に満たして実装できるようになります。 . その他の比較 厳しい規制は無視できます。
ここで概念について説明します。仕様には フォーマット ルール
と コード品質ルール (コード品質) の 2 種類があります。ルール)
。上記の基本仕様は基本的に コード形式規則
に属します。
次に、一般的に使用される基本的な書式設定ルール、つまり コード形式ルール
を示します。例として standardjs スタイル を使用します。
インデントに加えて、複数の スペース を使用しないでください。 eslint: no-multi-spaces
行末に spaces を残しません。 eslint: no-trailing-spaces
属性の前に spaces を追加しないでください。 eslint: no-whitespace-before-property
セミコロンが見つかった場合は、スペースをセミコロンの後に残す必要があります。しかし、その前ではありません。 eslint: semi-spacing
コード ブロックの先頭と末尾に spaces を残します。 eslint: space-before-blocks
かっこの間に spaces を残さないでください。 eslint: space-in-parens
テンプレート文字列の変数の前後に spaces を追加しないでください。 eslint: template-curly-spacing
ご覧のとおり、基本的には セミコロン
Enter
space
space
関連仕様。これらの仕様は一部の IDE に統合されています。
たとえば、VSCode は、簡単な構成で上記のルールをすべて満たすことができます。
VSCode 自体には Format 関数があり、ほとんどのファイル タイプでサポートされています。デフォルトのショートカット キーは Ctrl K D
です。
は、Format on Save
への設定もサポートしています。
#次に、上記の基本仕様のうち、デフォルトの Format 関数に含まれていないものをリストします。 ###############セミコロン###。 - デフォルトでは仕様はなく、
settingsスペース インデント
。 - デフォルトの TabSize は 4 スペースで、
関数を宣言するときは、括弧と関数名の間に スペース
を追加します。 -
ファイルの最後に 空白行
を残します。 - デフォルトではなし。
#4 つしかありません。3 つ目はルールが違うとも言えますが、ルールがあるので合計 3 つあります。したがって、ほとんどのルールはデフォルトのフォーマット関数ですでにサポートされています。
は 3 つの仕様に分かれています: にはセミコロン
が必要です; には を含める必要があるか、
は を禁止する必要があります。
VSCode にはデフォルトでは要件はありませんが、
settings:
## を通じて定義できます。 #ignore
セミコロンは必須です;
は一般的に 2 スペースまたは 4 スペースの 2 つの仕様に分かれており、現在市場ではそのほとんどが一般的です。 . 仕様ではスペース 2 個が優先されます。
インデントの検出
対応する設定: editor.detectIndentation
デフォルト値 true
、現在のファイルの内容に基づいて、現在のファイルに 2 があるかどうかを検出します。スペースまたは 4 つのスペースを入力し、これに従ってフォーマットします。タブ サイズ
は設定に対応します: editor.tabSize
: デフォルト値 4
、新しいファイルの場合は、この値に基づいて決定され、デフォルトは 4 タブ サイズです。 上の図はデフォルト設定です。すべてのファイルを標準として 2 つのスペースでインデントしたい場合は、インデントの検出をオフにできます。
まず、 タブ サイズ
を 2 に設定します。
インデントの検出
をオフにせず、タブ サイズ
を 2 に変更するだけの場合、インデントはファイルの内容に基づいて行われ、新しいファイルはスペース2つでインデントしてください。
VSCode は、ファイルの内容に基づいてファイルのタブサイズを検出します。ファイルの下部にあるステータス バーに表示され、クリックして変更できます。
キーワード insertFinalNewline
を検索します。設定では、デフォルトのオプションは無効になっており、チェックすると、保存時にすべてのファイルの末尾に空白行が残ります。
すべての 設定
は次のように構成されます。
Workspace 配下に
settings を設定することを推奨します。設定後、
配下に settings.json
ファイルが生成されます。 vscode のパスを指定して送信可能 開発チームの内部仕様を git 上で統一します。
// .vscode/settings.json { "editor.formatOnSave": true, // 保存文件自动format "javascript.format.semicolons": "insert", // js文件,强制必须有分号,设置`remove`则禁止分号 "typescript.format.semicolons": "insert", // ts文件,同上 "editor.tabSize": 2, // 设置默认缩进为2个空格 "editor.detectIndentation": false, // 是否强制所有文件按tabSize设置缩进;"否"则根据文件内容缩进、新建文件按tabSize缩进。 "files.insertFinalNewline": true, // 所有文件末尾留一空行 "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" // 设置js类型文件的默认format为VSCode自带Format }, "[javascriptreact]": { "editor.defaultFormatter": "vscode.typescript-language-features" // jsx文件,同上 }, "[css]": { "editor.defaultFormatter": "vscode.css-language-features" // css文件,同上 }, "[less]": { "editor.defaultFormatter": "vscode.css-language-features" // less文件,同上 } }実際には、VSCode 設定でさらに多くの形式構成を構成でき、自分で調べることができます。
コード形式ルール に加えて、その他の仕様は
コード品質ルール ありこれは、
ESLint 仕様を使用して行うことができます。これらの仕様は、上記の
コード形式ルール および
ESLint の保存時の自動修正と矛盾しないためです。 , ファイルを保存できたら、まず VSCode 形式
コード形式ルール を使用し、次に
ESLintprocessing
コード品質ルール を使用します。例をいくつか挙げます。
ESLint と VSCode チームのフロントエンド コード仕様を統一する最後に
利点:
#シンプルな構成、さまざまな npm やプラグインをインストールする必要がなく、VSCode には独自の機能があります。
小規模で単純なプロジェクト、または
コード形式仕様一部のルールはカスタマイズをサポートしており、実際のニーズに応じて構成できます。
ルールはあまり多くありません。基本的には、
コード形式のルール検証がなければ、ESLintと組み合わせる必要があります。 大規模プロジェクトや大規模工場など、比較的フォーマット仕様の高いプロジェクトの要件には対応できません。
Git フックを通じてコードを送信するときに、コードを自動的に検証する方法はありません。
VSCode の詳細については、vscode 基本チュートリアル をご覧ください。
以上がVSCode の Format 関数を使用してコードの書式設定を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。