私のVSコードセットアップ(そして知られていない拡張子)

22649 ワード

ねえねえ👋
あなたはタイトルを見て、皮肉にも「Yay、もう一つのコード拡張リスト」と言います.事実は、私は記事を開いて終了し、彼らはすべての間に10の拡張のうち、8を共有するほとんどの時間を実現することです.私はそれらのほとんどを使用するので、私は記事で最も注目されるものについて詳細に行くつもりはない、代わりに私は私が使用しているあまり知られていると最も有用な拡張子を分析しようとします.私は、あなたがここで探しているものを簡単に見つけることができるように、拡張リストをカテゴリに分割しました、そして、記事の終わりに、あなたは私が使っている拡張子の完全なリストを見つけることができます.

私たちの主と救世主

エディタ自体から始めましょう.VSコードはマイクロソフト製のコードエディタです.これは主にオープンソースMonaco Editor , 拡張と広範な設定API.それは私がAtomから変更された理由であり、私たちの主と救世主対コードについて説教をやめたことがない理由です.
拡張子を使用してSettings Sync , 私は長年ずっと同じ構成を保ってきた.最近マイクロソフトは、さらに機能するように見える組み込みの同期機能を追加しました.時々、私は私の拡張をきれいにして、色とアイコンテーマを変えて、いくつかの新しい宝石をインストールします、したがって、私が現在59の拡張を揺るがしている理由.
これが私のVSコードセットアップです👇

最初のレイアウトからいくつかの主な変更は、右側のサイドバー、アクティビティバー、テーマ、サイドバーの項目が含まれます.
テーマから始めると、現在、これらの拡張モジュールを使用しています.

テーマ＆レイアウト

テーマ:Electron vue
サイドバーのアイコンCarbon Product Icons
不透明度( Linux & Windowsのみ)GlassIt-VSC
フォルダとファイルのアイコンMoxer Icons
フォントFiraCode (w/ligature)
右側のサイドバーとボックスから利用可能な他のカスタマイズのために、あなたはあなたにこれを加えることができますsettings.json ( Ctrl + Pキーを押して、[オープン設定( JSON )]を選択して設定を開くことができます.

{
    **"workbench.editor.tabCloseButton": "off", // I was accidentally closing tabs too often, so I removed the close button
  "workbench.sideBar.location": "right", // Pretty straightfoward**
  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'", // Fira Code is an open source ligature font that I strongly recommend you install
  "editor.fontLigatures": true, // Enable font ligatures for Fira Code
  "editor.formatOnPaste": true, // Formats your pasted content
  "editor.minimap.enabled": true, // Enables the file minimap
  "editor.minimap.maxColumn": 200,  // Minimap char count
  "editor.minimap.renderCharacters": false, // You can render actual characters instead of the color blocks
  "editor.minimap.showSlider": "always", // Adds a scrollbar to the minimap
    "terminal.integrated.fontFamily": "'MesloLGS NF', 'MesloLGL Nerd Font', monospace", // Change to your terminal font
  "terminal.integrated.shell.linux": "/usr/bin/zsh",  // Change to your default shell and check your OS key (ex: for mac use "shell.mac"),
    "files.eol": "\n",  // Force LF  line endings, useful if you use Windows and Linux/Mac
  "files.watcherExclude": {  // Boosts performance by not watching for changes in these directories
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/*/**": true
      },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": false // Set to true if you're enforcing ESLint. Disable if you're working on old projects that changed their linting config over time.
      },
  "eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ], // use ESLint on these files
  "eslint.workingDirectories": [
    "./node_modules/eslint"
  ],
    "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // use the Prettier extension to format javascript code
  },
}

リンギングとコードフォーマット

私は2つの拡張子のための2つの設定が含まれている.ESLint and Prettier - Code formatter .
最初は、私の意見では、JavaScriptの周りの最高のリンターです.あなたのコードが一般的なベストプラクティス規則を破るならば、基本的にそれは警告するか、投げます.あなたがそれを使わなかったならば、私は強くあなたがそれをし始めることを提案します、そして、エスペラントがあなたがそれがばかであると思う何かについて文句を言うたびに、そのラインのためにライナーを無効にする代わりに、それについて読んでください.Eslintは私が開発者として成長し、それがよく知られている拡張子である間、真剣に私を助けました.
一方、コードフォーマッタは、コードをprettilsです.それで、何か私のエディタを貼り付けるとき、コードは即座にきれいにフォーマットされます.
いくつかのプロジェクトで見たことがあるのは、コードのスタイルがオフになっているならば、リンタがあなたに警告して、きちんとしているならば、あなたが適所に持っているESLINT規則に従ってあなたのコードをフォーマットするという意味です.

スニペット

私は正直に私はあまりにも多くのスニペットの拡張子を使用していると思う事実、私はこれらのリストには、いくつかを使用していない可能性があります知っている.私は'スニペット'人ではない.しかし、私の拡張リストから、私が日常的に使用して、実際に彼らが存在するということを知っているものはそうです.ES7 React/Redux/GraphQL/React-Native snippets , Path Intellisense & JavaScript (ES6) code snippets . パスIntelliSenseは自動的に相対パスのインポートを完了するには、他の2つのJavascript/反応のショートカットのほとんどを使用しています.オートコンプリートとインテリセンスのビッグボスVisual Studio IntelliCode , マイクロソフト自体によって開発された、それはあなたのコードエディタにAIベースの関連するコード補完を提供し、すべてのVSCodeユーザーを持っている必要があります.
その他のクールな'オートコンプリート'の拡張子を含めるTurbo Console Log キーボードショートカットで使用します.Auto Close Tag , 自己閉鎖要素と私の個人的な好みでさえ完璧に働くよく知られている拡張Auto Import , インポートのコードアクションを自動的に見つけ、解析します.

生産性とIT

下のバーでは、私はどのくらいの日のためにコーディングしたかを見ることができます、私は時間追跡のための2つの拡張子を使用していると私は私が最も長い時間を使用しているものをお勧めしますWaka Time . サイドバーでも見ることができますProject Manager 'sロゴは、あなたのサイドバーから速くプロジェクトの間で変わるための拡張です.
サイドバーでも2つのGit拡張機能があります.Git Lens 最初に、完全にあなたのサイドバーからコード非難、改正ナビゲーションとファイル、線と分岐履歴を加えることによってあなたのコードエディタにGitを統合することができます.もう一つはGit Graph ソースコントロールタブにきちんとグラフィカルなインターフェイスを追加し、すぐにリポジトリのステータスを確認できます.
サイドバーの最後の2つのアイテムはTodo Tree , すべてを示す// TODO 我々の存在の現在の倉庫とバンに関するコメント.Jira また、私は最近発見されたVSCode拡張機能を持っており、ボックスから割り当てられたタスクの迅速な垣間見ることができます.

佳作

Hermes Comments 約1 kインストールして、vscodeコマンドパレット(Ctrl + Shift + p)にコメントコマンドを追加する単純な拡張機能です.単にテキストを強調表示し、コマンドパレットを押すと、強調表示されたテキストのフレームまたはサブセクションのコメントを作成します.
Emoji Log プレフィックスがあなたの絵文字でコミットする多くの表面化拡張の1つです.これは実際にソースコントロールタブにボタンを追加するためです.
Power Mode 私が私がそれまで持っているまで、私が必要としたということを知らなかったもう一つの拡張子です.この赤ちゃんはコンボにあなたのキーストロークを追加し、さらにあなたのコードエディタにスパークスとカスタムGIFを追加するオプションがあります.
私が使用を開始する前にident-rainbow , Guides and Bracket Pair Colorizer . これらはそこで最も知られている、そして、最も古い拡張のうちの1つです、そして、私がvscodeを使っているとき、彼らは常に存在しています.

フルリスト

フォローミー

あなたがリスト全体を読んで終わったらありがとう💪 より多くのJS/反応コンテンツの場合は、私のチェックアウトすることができますwebsite そして、私の後を追ってください.
あなたがどんな拡張子を使っているのかを教えてください👀

Reference

この問題について(私のVSコードセットアップ(そして知られていない拡張子)), 我々は、より多くの情報をここで見つけました https://dev.to/davidmorais/my-vs-code-setup-and-less-known-extensions-3elp

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

ちょうど7行のコードのサービスとしてのGoogle T 5翻訳

BJ 16926回転配列1

私のVSコードセットアップ(そして知られていない拡張子)

私たちの主と救世主

テーマ＆レイアウト

リンギングとコードフォーマット

スニペット

生産性とIT

佳作

フルリスト

テーマ＆レイアウト

生産性とIT

Utils

言語とスニペット

リンギング

フォローミー

Reference