VSCode の Format 関数を使用してコードの書式設定を実装します。-VSCode-php.cn

VSCode に付属する Format 関数を使用するだけで、構成可能なコードのフォーマットのニーズに対応できます。 VSCodeのFormat機能については以下の記事で紹介していますので、ご参考になれば幸いです！

VSCode の Format 関数を使用してコードの書式設定を実装します。

#近年、開発環境ではコードの標準化にますます注目が集まっており、ツールを使用してチェックし、自動的に修復することがコード保証の第一の選択肢となっています。。

通常は、Lint (ESLint StyleLint) や Prettier などの補助ツールを使用します。簡単な構成と展開を通じて、いくつかの一般的なコードスタイル仕様を使用して目的を達成できます。自動プロンプト、自動修復、自動実行および監視。

しかし、次の状況に遭遇したかどうかはわかりません:

IDE でコードを入力するとき、リアルタイム形式がないため (通常は自動的に保存時にフォーマットされます）、赤いプロンプトが常に表示され、いつも文法が間違っていると思いますが、実際にはフォーマットされていないだけです。 (例: ESLint プラグインの自動検証プロンプト)
初めて使い始めたときは、いつも理解できないルール (おそらく厳しすぎる) に遭遇しました。その具体的な理由は、それが開発中にルールを学ぶことに等しいからです。
コードを書いたところ、保存後、コードが突然長くなり、すべての行が折り返され、50 行のコードが突然 100 行に伸びてしまいました。 ここでは誰の名前も出しません。
コード仕様に関する要件はそれほど多くありません (フォーマットに関することの方が多いです)。たとえば、プロジェクトが比較的小さい、プロジェクトのスケジュールが比較的厳しいなどです。 基本的な書式設定の要件を満たしている限り。

特に最後のプロジェクトです。実際、多くの小規模プロジェクトでは、最も基本的なフォーマットを満たすだけで済み、チームが一連の簡単な仕様を確実に満たして実装できるようになります。 . その他の比較厳しい規制は無視できます。

ここで概念について説明します。仕様には フォーマットルール と コード品質ルール (コード品質) の 2 種類があります。ルール) 。上記の基本仕様は基本的に コード形式規則 に属します。

次に、一般的に使用される基本的な書式設定ルール、つまり コード形式ルール を示します。例として standardjs スタイルを使用します。

semi
スペースインデント
indentキーワードの後に
space
keyword-spacing関数を宣言するときに、括弧と関数名の間に
space
space-before-function-paren
space
space-infix-opsカンマの後に
space
comma-spacing単一行のコードブロックの両側に
spaces
block-spacingファイルの最後に
空行
eol-last
コロンと Key-Value の値の間には空白
キー間隔
インデントに加えて、複数の スペース を使用しないでください。 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

VSCode 自体には Format 関数があり、ほとんどのファイルタイプでサポートされています。デフォルトのショートカットキーは Ctrl K D です。

VSCode の Format 関数を使用してコードの書式設定を実装します。

は、Format on Save への設定もサポートしています。

VSCode の Format 関数を使用してコードの書式設定を実装します。

#次に、上記の基本仕様のうち、デフォルトの Format 関数に含まれていないものをリストします。＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃セミコロン＃＃＃。 - デフォルトでは仕様はなく、

settings

スペースインデント 。 - デフォルトの TabSize は 4 スペースで、
settings
関数を宣言するときは、括弧と関数名の間に スペースを追加します。 -
standardjs
ファイルの最後に 空白行 を残します。 - デフォルトではなし。
settings
#4 つしかありません。3 つ目はルールが違うとも言えますが、ルールがあるので合計 3 つあります。したがって、ほとんどのルールはデフォルトのフォーマット関数ですでにサポートされています。

は 3 つの仕様に分かれています: にはセミコロン

が必要です;

は禁止されていますセミコロン；はOK

です。市場にはさまざまな一般的な仕様がありますが、通常、

には を含める必要があるか、 は を禁止する必要があります。 VSCode にはデフォルトでは要件はありませんが、settings:

## を通じて定義できます。 #ignore

デフォルトでは、セミコロンの有無にかかわらず使用できます;

VSCode の Format 関数を使用してコードの書式設定を実装します。

insert
セミコロンは必須です;
はセミコロンを禁止します。
は一般的に 2 スペースまたは 4 スペースの 2 つの仕様に分かれており、現在市場ではそのほとんどが一般的です。 . 仕様ではスペース 2 個が優先されます。
VSCode のデフォルトの仕様は次のとおりです:

インデントの検出 対応する設定: editor.detectIndentation デフォルト値 true、現在のファイルの内容に基づいて、現在のファイルに 2 があるかどうかを検出します。スペースまたは 4 つのスペースを入力し、これに従ってフォーマットします。
タブサイズ は設定に対応します: editor.tabSize: デフォルト値 4 、新しいファイルの場合は、この値に基づいて決定され、デフォルトは 4 タブサイズです。

VSCode の Format 関数を使用してコードの書式設定を実装します。

上の図はデフォルト設定です。すべてのファイルを標準として 2 つのスペースでインデントしたい場合は、インデントの検出をオフにできます。 まず、 タブサイズ を 2 に設定します。

インデントの検出をオフにせず、タブサイズを 2 に変更するだけの場合、インデントはファイルの内容に基づいて行われ、新しいファイルはスペース2つでインデントしてください。

VSCode は、ファイルの内容に基づいてファイルのタブサイズを検出します。ファイルの下部にあるステータスバーに表示され、クリックして変更できます。

VSCode の Format 関数を使用してコードの書式設定を実装します。

3. ファイルの最後に空白行を残します

キーワード insertFinalNewline を検索します。設定では、デフォルトのオプションは無効になっており、チェックすると、保存時にすべてのファイルの末尾に空白行が残ります。

VSCode の Format 関数を使用してコードの書式設定を実装します。

要約すると、

すべての 設定 は次のように構成されます。

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文件，同上
  }
}

ログイン後にコピー

その他の形式ファイル Format

その他の仕様:

コード形式ルール に加えて、その他の仕様は コード品質ルール ありこれは、ESLint 仕様を使用して行うことができます。これらの仕様は、上記の コード形式ルール および ESLint の保存時の自動修正と矛盾しないためです。 , ファイルを保存できたら、まず VSCode 形式 コード形式ルール を使用し、次に ESLintprocessingコード品質ルール を使用します。例をいくつか挙げます。

は、単一引用符
または二重引用符 を強制します。 eslint: quotes
が常に使用されます。
は
== を置き換えます。 eslint: eqeqeq

ESLint と VSCode チームのフロントエンドコード仕様を統一する最後に

この記事では、フロントエンドコードコード形式仕様#を標準化する方法をまとめます。 # VSCode 開発ツールのみを使用 # し、構成可能な自動ファイルフォーマットコード関数をサポートします。

利点:

#シンプルな構成、さまざまな npm やプラグインをインストールする必要がなく、VSCode には独自の機能があります。

小規模で単純なプロジェクト、または
コード形式仕様
一部のルールはカスタマイズをサポートしており、実際のニーズに応じて構成できます。
欠点:

ルールはあまり多くありません。基本的には、

コード品質ルール
検証がなければ、ESLintと組み合わせる必要があります。大規模プロジェクトや大規模工場など、比較的フォーマット仕様の高いプロジェクトの要件には対応できません。
ESLint
Prettier
Git フックを通じてコードを送信するときに、コードを自動的に検証する方法はありません。
この記事では、

VSCode の詳細については、vscode 基本チュートリアルをご覧ください。

以上がVSCode の Format 関数を使用してコードの書式設定を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。