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

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

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

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

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

• IDE でコードを入力するとき、リアルタイム形式がないため (通常は自動的に保存時にフォーマットされます）、赤いプロンプトが常に表示され、いつも文法が間違っていると思いますが、実際にはフォーマットされていないだけです。 (例: ESLint プラグインの自動検証プロンプト)

• 初めて使い始めたときは、いつも理解できないルール (おそらく厳しすぎる) に遭遇しました。その具体的な理由は、それが開発中にルールを学ぶことに等しいからです。

• コードを書いたところ、保存後、コードが突然長くなり、すべての行が折り返され、50 行のコードが突然 100 行に伸びてしまいました。 ここでは誰の名前も出しません。

• コード仕様に関する要件はそれほど多くありません (フォーマットに関することの方が多いです)。たとえば、プロジェクトが比較的小さい、プロジェクトのスケジュールが比較的厳しいなどです。 基本的な書式設定の要件を満たしている限り。

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

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

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

# ＃＃＃＃＃＃＃＃セミコロン＃＃＃。 eslint:

• semi

  スペースインデント
。 eslint:

• indentキーワードの後に​​

  space
を追加します。 eslint:

• keyword-spacing関数を宣言するときに、括弧と関数名の間に

  space
を追加します。 eslint:

• space-before-function-paren

  space
文字列結合演算子の間には空白を残す必要があります。 eslint:

• space-infix-opsカンマの後に

  space
を追加します。 eslint:

• comma-spacing単一行のコード ブロックの両側に

  spaces
を追加します。 eslint:

• block-spacingファイルの最後に

  空行
を残します。 eslint:

• eol-last

  コロンと Key-Value の値の間には空白
を残す必要がありますペア。 eslint:

• キー間隔

• インデントに加えて、複数の スペース を使用しないでください。 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 です。

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

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

settings

を通じて構成できます。

• スペース インデント 。 - デフォルトの TabSize は 4 スペースで、

  settings
を通じて構成できます。

• 関数を宣言するときは、括弧と関数名の間に スペースを追加します。 -

  standardjs
とは異なり、VSCode にはデフォルトでスペースがありません。

• ファイルの最後に 空白行 を残します。 - デフォルトではなし。

  settings
を通じて設定できます。

• #4 つしかありません。3 つ目はルールが違うとも言えますが、ルールがあるので合計 3 つあります。したがって、ほとんどのルールはデフォルトのフォーマット関数ですでにサポートされています。

1. セミコロン

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

が必要です;

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

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

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

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

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

• insert

  セミコロンは必須です;

#remove
• はセミコロンを禁止します。

2. インデントの仕様

• は一般的に 2 スペースまたは 4 スペースの 2 つの仕様に分かれており、現在市場ではそのほとんどが一般的です。 . 仕様ではスペース 2 個が優先されます。

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



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

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

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



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

キーワード 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 設定でさらに多くの形式構成を構成でき、自分で調べることができます。

その他の形式ファイル Format

たとえば、css、less、json、md など。個人的には、VSCode のデフォルトのものを使用するだけで十分だと感じています。

その他の仕様:

上記の

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

• は、単一引用符

  または二重引用符 を強制します。 eslint: quotes

  が常に使用されます。
===
• は

  == を置き換えます。 eslint: eqeqeq

ESLint
の使用法については、前の記事を参照してください:

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

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

利点:

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

• 小規模で単純なプロジェクト、または

  コード形式仕様
の需要が低いプロジェクトに適しており、小規模工場に適しています。

• 一部のルールはカスタマイズをサポートしており、実際のニーズに応じて構成できます。

• 欠点:

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

コード形式のルール
です。
• コード品質ルール

  検証がなければ、ESLintと組み合わせる必要があります。 大規模プロジェクトや大規模工場など、比較的フォーマット仕様の高いプロジェクトの要件には対応できません。

• ESLint
と比較すると、ルールが少なく、設定可能性もあまり高くありません。

• Prettier
と比較すると、ルールは非常に少なく、一般的なコーディング スタイルの仕様ほど優れているわけではありません。

• Git フックを通じてコードを送信するときに、コードを自動的に検証する方法はありません。

• この記事では、
コード形式の仕様
ソリューションとアイデアのみを提供します。それがあなたに適しているかどうかは、あなた自身のニーズによって異なります。

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

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