KatieのVsCodeカンニングペーパー

仮定！

同じページに行きましょう.このガイドでは、すでに設定されている設定とeslintの設定を設定します.これは、あなたがきれいでeslintちょうど仕事をする方法を見つけ出したいならば、役に立ちます™ 保存のVSコードで.
あなたがきれいであるだけでなく、eslintまたはeslintを使用していないならば、これは従うのが簡単でなければなりません.いくつかの他のフォーマッタ/linterコンボを使用している場合は、これはまだ参考になるかもしれませんが、私はあなたがここに来たかわからない-ウェルカム!

拡張！

まあ、これは簡単な部分ですいくつかの拡張機能をインストールしましょう!VSコードの左側サイドバーでは、拡張タブを見つけます.それは1つのスライスが削除されている正方形のピザのように見えます.それの上にホバリングExtensions . あなたが探している拡張子を検索するためにクリックします.

設定！

あなたの設定を取得する最も簡単な方法は、キーボードショートカットされているcmd+, . これは実際にすべてのMacアプリケーションで動作します.
vscodeの設定はGUIでもJSONとしても登場します.JSONにアクセスするには、設定中に右上隅にある矢印のファイルアイコンを探します.

アイコンのALTテキストは「オープン設定(JSON)」です.そのアイコンをクリックすると設定が開きます.JSON!多くの設定は、GUIから設定することができますが、我々が今日対処しているものの一部は手動でsettings.json , それで、我々はちょうどそこで編集します.(プラス、それはコピーをコピーし、より良いペースト).

エスプリ+プリティ！

まず、これらのプラグインをインストールする必要があります.

Prettier

ESLint

それから、以下の設定をお勧めします.

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
}

このように、言語ごとにデフォルトフォーマッタを設定できます.予想通りうまくいかなければ、よくセットしますeditor.defaultFormatter トップレベルのオブジェクトesbenp.prettier-vscode . もちろん、それはすべてのファイルをきれいに使用しますが、ねえ、私は通常JS生態系だけで働いています.
設定source.fixAll 代わりにsource.fixAll.eslint それがあまりに重い手始めであるならば.

その他のプラグイン！

これらは他のプラグインです.

Alphabetical Sorter

私は一貫してこれを使用しません、しかし、私がそれを必要とするとき、それはとても便利です.

GitLens

私は、何かが最後に編集されたとき、そして、コミットされたものがコードを見ていて、問題を調査しようとしていたときの文脈を見るのが好きです.

その他の設定！

これらはVSコードの私の好きな基本的な設定です.

{
  "editor.scrollBeyondLastLine": false,
  "editor.minimap.renderCharacters": false,
  "editor.renderWhitespace": "boundary",
  "editor.tabSize": 2,
  "editor.rulers": [80]
}