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]
    }