VS Code 必須のプラグイン アーティファクト (2023)

序文

     開発者は、日々のワークフローの改善に役立つソリューションを常に探しています。VS Code 市場には優れた拡張機能が数多くあります。

文章

Visual Studio Code は、Microsoft が開発した無料のクロスプラットフォーム テキスト エディターです。優れたパフォーマンスと豊富な機能により、VSCode は間違いなく市場で最も人気のある軽量コード エディターの 1 つです。VSCode が非常に強力なのは、プラグイン マーケットのおかげです。優れたプラグインは、全員の開発効率を大幅に向上させることができます。くだらないことを言わずに、プラグインを使用してください。

この記事は今後も更新していきます！(最終更新日 2023.07.28)

注: プラグインは単なる補助的なものです。自分に合ったものを選択してください。インストールが多すぎると、プラグインの競合や過度のパフォーマンスの消費が発生する可能性があります。

基本的なプラグイン

1. 「中国語（簡体字）（簡体字中国語）言語」

      中国語基本パック、英語が苦手な学生を助けます~

---

2.《コメント翻訳》

選択後にマウスを移動すると翻訳できるため、翻訳をコピーして貼り付ける必要はもうありません。

Youdao の翻訳ソースを置き換えます:

• Ctrl+Shift+p を押し、ポップアップ検索ボックスに「翻訳」と入力し、「翻訳ソースの変更」をクリックします。
• [その他] を選択し、右側のポップアップ ウィンドウで Youdao 翻訳をダウンロードします。
• ダウンロードが完了したら、設定構成を変更します

設定構成:

"commentTranslate.source": "DarkCWK.youdao-youdao",
 //此处的有道要提前下载有道翻译插件，其余翻译源有问题
 //当然如果你用的时候没有报错，可以直接用默认设置
 "commentTranslate.targetLanguage": "zh-CN"

 3.《ブラウザで開く》

VSCode はブラウザでファイルを直接開くための組み込みインターフェイスを提供していないため、このプラグインは、デフォルトのブラウザでファイルを表示するオプションと、クライアント (Firefox、Chrome、IE) でコマンド パネルを開くオプションを追加します。ショートカットメニュー。

 4.《ライブサーバー》

ライブローディングを備えた小規模サーバー。html/css/javascript をクラックするために使用できますが、最終的なサイトの展開には使用できません。つまり、ライブサーバーをリアルタイムサーバーとして使用し、開発された Web ページやプロジェクトの効果をプロジェクト内でリアルタイムに表示できます。

さらに: 「Live ServerPP」プロジェクトは Live Server から来ており、元の機能に次の機能が追加されています。

• WebSocket メッセージ サービスをサポートし、WebSocket クライアントのデバッグに使用できます
• サーバー側の API インターフェイスをシミュレートするために使用できる、プログラム可能な仮想ファイルをサポートします。

5.《コードランナー》

このプラグインは、node.js とともに事前にインストールする必要があります。プラグインのインストール後、ノード環境で直接実行できます。.js ファイルの右上に小さな実行ボタンが表示されます。クリックすると実行結果がvscodeコンソールに出力されます。しなければならない！

6.《GitLens》

git機能が強化され、必要なプラグインであるVSCodeで作成者や変更時刻などの表示がサポートされました。もちろん、初心者にとっては、このプラグインを使用して git コマンドに慣れることはできません。

7.《vscode-icons》

アイコン プラグインは数多くありますが、VSCode が作成した公式アイコン ライブラリは次のとおりです。

8.《アトムワン ダークテーマ》 

VSCode 100% 賞賛テーマ、作者のお気に入りのテーマの 1 つです。

さらに (高値から低値の順に推奨):

• One Dark Pro: 世界ダウンロード数No.1!
• ドラキュラ公式: マッチョファンの皆さん、言うことはありません!
• GitHub テーマ: クラシック GitHub カラースキーム
• Monokai Pro: 見栄えの良いテーマやアイコンが豊富にあり、すべて変更できます。
• Ayu：シンプルで落ち着いた雰囲気のアイコンテーマが付属
• 素材テーマ：ある種の先進的な美しさがある！
• Dainty: 人気の VSCode テーマの合理化されたバージョンは大きなコレクションです~
• One Monokai テーマ: Monokai と One Dark を組み合わせたバージョン
• Horizo​​n テーマ: 赤の暖色テーマ

9.《オールツリー》

ToDo リスト プラグインは、サイドバーに TODO コメントを記録でき、コメント行をハイライト表示できます。良いことは言う必要はありません~

クイック構成:

"todo-tree.highlights.customHighlight": {
    "BUG": {
      "icon": "bug",
      "foreground": "#F56C6C",
      "type": "text"
    },
    "FIXME": {
      "icon": "flame",
      "foreground": "#FF9800",
      "type": "tag-and-comment"
    },
    "TODO": {
      "foreground": "#FFEB38",
      "type": "line"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "#67C23A",
      "type": "whole-line"
    },
    "INFO": {
      "icon": "info",
      "foreground": "#909399",
      "type": "text-and-comment"
    },
    "TAG": {
      "icon": "tag",
      "foreground": "#409EFF",
      "type": "line"
    },
    "HACK": {
      "icon": "versions",
      "foreground": "#E040FB",
      "type": "line"
    },
    "XXX": {
      "icon": "unverified",
      "foreground": "#E91E63",
      "type": "line"
    }
},
"todo-tree.general.tags": ["BUG", "HACK", "FIXME", "TODO", "INFO", "NOTE", "TAG", "XXX"]

 効果は次の図に示すとおりです。

時間統計プラグイン

1.《コーディングトラッカー》

VSCode でのプログラミング時間を記録するプラグイン。このプラグインには、node.js をプレインストールする必要があります。

ダウンロードが完了したら、ショートカット キー Ctrl + SHIFT + P を押すと、ダイアログ ボックスが表示されます。ダイアログ ボックスに Enter を入力すると、プログラミング レコード レポートが表示されます。 

 プラグインを実行すると、ページは次のようになります。

 

2.《ワカタイム》

VSCode でコードを記述するのに費やした時間をカウントするには、公式 Web サイトでプログラミング時間を直接確認できます。壁割れ推奨！

使用手順:

(1)WakaTimeプラグインをインストールします インストール後、APIキーを入力する入力欄が表示されます。

(設定 => パッケージ設定 => WakaTime => 設定ユーザーで API キーを設定することもできます)

(2) wakaTime公式サイトにログインし、右上のアカウント・個人情報を登録→設定→シークレットAPIキーをコピーします。

(3) Python がシステムにインストールされていない場合、wakaTime は正常に動作しませんので、Python をインストールする必要があります。

(4) インストールが成功したら、WakaTime 公式 Web サイトで自分のプログラミング時間を確認できます。

 

 

開発効率化プラグイン

1. 《自動終了タグ》

   HTML/XMLタグを自動で閉じてくれる、言うことなし、壁のひび割れにオススメ！

1. 《自動タグ名変更》

   反対側のラベルの同期修正も自動的に完了します。言うことはありません。壁のひび割れに推奨されます。

1. 《テンプレート文字列コンバータ》

   string 内の JavaScript に自動的に変換されるテンプレート文字列を使用する場合${}、一重引用符または二重引用符を手動でバックティックに変更する必要はもうありません。

1. 《Prettier - コードフォーマッタ》

   コードの自動フォーマットプラグイン。

設定を変更します。

/*  prettier的配置 */
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": false, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "terminal.integrated.allowMnemonics": true,
    //额外配置
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
///报错的话，检查一下有没有用逗号与上一项设置分隔

または、プロジェクトのルート パスに新しいファイル .prettierrc を作成し、次の内容をそのファイルに追加します。

{
  "printWidth": 150,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tslintIntegration": true,
  "insertSpaceBeforeFunctionParenthesis": false
}

Prettier Chinese 公式 Web サイトに直接アクセスしてオンラインテストを行うことができます。

1. 《CSS ピーク》

   CSS 定義をすばやく表示するために使用しますCtrl + 鼠标左键。

効果は次の図に示すとおりです。

1. 《のぞき見》

   CSS Peek は Vue をサポートしていませんが、このプラグインは Vue ファイルをサポートします。

1. 《簡単レス》

   これは、ファイルの書き込みを減らした後に css または wxss ファイルを生成するために使用されます。

個人の好みに応じていくつかの設定を追加できます。

// Easy LESS配置
 "less.compile": {
      "compress": false,//是否压缩
      "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
      "out": true, // 是否输出css文件，false为不输出，千万不要是false
      "outExt": ".wxss", // 输出文件的后缀,小程序可以写'.wxss'
      // "outExt": ".css", // 输出文件的后缀,小程序可以写'.wxss'
 }

1.《Vue VScode スニペット》

コード スニペットの略語を作成できるため、開発時間を大幅に節約し、面倒なテンプレート構文の代わりにロジックに時間を費やすことができます。

2.《正規表現プレビューア》

正規表現の効果をリアルタイムでプレビューします。

3.《任意のルール》

中国人が開発した正規表現生成プラグインを右クリックして正規表現を選択すると、ポップアップ入力ボックスで目的の正規表現を検索できます。

4.《コードイフ》

Codelf は、開発者がオンライン オープン ソース プラットフォーム Github、Bitbucket、Google Code、Codeplex、Sourceforge、Fedora Project のプロジェクト ソース コードを検索して、キーワードに一致する既存の変数名を見つけるのに役立ちます。この検索サービスは中国語での直接検索をサポートしています。codeifは中国語クエリをサポートし、中国語の意味を入力し、ニーズに応じて可能な限りニーズを満たす結果をクエリし、クエリ結果に関連するさまざまなプログラミング言語をサポートするコードフラグメントとコードベースを表示できます。

5.《Javascript、Python、Typescript、PHP、Go、Java、Ruby など向けの Tabnine AI オートコンプリート》

何百万もの開発者に信頼されている AI コード補完アシスタントによる専門家の指導により、生産性を向上させます。あなたが新人開発者であっても、経験豊富なプロフェッショナルであっても、単独で作業する場合でもチームで作業する場合でも、Tabnine の AI アシスタントは、最も一般的なコーディング言語と IDE をすべて使用してコードを完成させることで、開発をスピードアップします。(諸行無常、凧の記念にこの場所へ)

6.《AWS ツールキット -- CodeWhisperer》

Amazon AI プログラミング アシスタントの Amazon CodeWhisperer は、プログラマーがより速く、より安全にコードを書くのを支援するツールです。開発者が alt + c を押すと、リアルタイムでコードの提案が表示されます。個人ユーザーは完全に無料です。使用するときは、必要なコメント (英語が最も正確で、中国語もサポートされています) を作成し、コメントの下で alt + c を押すだけで提案が表示されます。

また、CodeWhisperer を使用する場合は、CodeWhisperer を登録する必要があります。登録プロセスは長いため、ここではリストしません~登録後、サイドバーで aws を選択して CodeWhisperer に入り、自動提案を選択します。

 スマートプロンプトプラグイン

1.《ES7 React/Redux/GraphQL/React-Native スニペット》

React/Redux/react-router の構文 Intellisense。

2.《冬》

Vue2 多機能統合プラグイン。構文強調表示、スマート プロンプト、emmet、エラー プロンプト、書式設定、オートコンプリート、デバッガーが含まれます。VSCode の公式 Vue2 プラグイン。Vue2 開発者には必須です。

"editor.formatOnSave": true を有効にし、同時に ESLint を使用する場合は、次の構成を使用して競合を回避できます。

//解决保存后自动添加分号
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 // 在函数名称前加一个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 "vetur.format.defaultFormatterOptions": {
     "js-beautify-html": {
         "indent_with_tabs": false,
         "wrap_line_length": 150,
         // - auto: 仅在超出行长度时才对属性进行换行。
         // - force: 对除第一个属性外的其他每个属性进行换行。
         // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
         // - force-expand-multiline: 对每个属性进行换行。
         // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
         "wrap_attributes": "aligned-multiple"
     },
   },

3.《エスリント》

VSCode プラグインに基づいて、ESLint はエラーを強調表示し、構成を通じてエラーを自動的に修正します。全体として、ESLint は JavaScript コードをチェックして修正するためのツールです。

 シンプルな構成:

 //保存代码，不自动格式化
 "editor.formatOnSave": false,
 // 当保存的时候，eslint自动帮我们修复错误
 "editor.codeActionsOnSave": {
   "source.fixAll": true
 },

作者：lihouyi
链接：https://juejin.cn/post/7232240262402555962
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1. 《JavaScript (ES6) コードスニペット》

   js (es6) コード スニペットのプロンプトと補完により、開発効率が向上します。​

2.  《パラメータのヒント》

JavaScript 関数のパラメータのタイプとメッセージを要求します。 

3.《vscode スタイルのコンポーネント》 

JS ファイルにスタイルを記述する際のスマートなヒントがあります。

4.《HTML CSS対応》

スマート ヒント CSS クラス名と ID。

5.《コードスペルチェッカー》

このスペル チェッカーの目的は、よくある単語のスペル ミスを検出し、キャメル ケースを検出できるようにすることです。少し厳密ですが、OCD患者は選択しないこともできます。

6.《エラーレンズ》 

 間違った文法形式を入力すると、ヒントが表示されます。

7.《ソナーリント》

コーディングの問題が発生する前に修正できます。スペル チェッカーと同様に、SonarLint はコーディング中にエラーやセキュリティ ホールを強調表示し、修正に関する明確なガイダンスを提供するため、コードがコミットされる前に問題を修正できます。VS Code の SonarLint は、JavaScript、TypeScript、Python、Java、HTML、および PHP コードの分析をサポートします。無敵！ 

8.《アクシオスのスニペット》 

axios スケルトンのワンクリック生成により、axios によって開始されたさまざまなリクエストのコード補完が可能になります。初心者の段階から利用できますが、実際の開発ではフレームワークを使用することが多いため、axios単体で使用することはほとんどありません。

プログラミング美化プラグイン

1. 《一致するタグを強調表示》

   一致する開始タグおよび/または終了タグを強調表示します。公式にサポートされているマークアップ: HTMLおよびJSX。他のスタイル (XML、Vue、Angular、PHP) も同様に機能しますが、動作が保証されているわけではありません。

効果は次の図に示すとおりです。

1. 《画像プレビュー》

   プレビュー画像プラグイン、お勧めです！

効果は次の図に示すとおりです。

1. 《SVGプレビュー》

   SVG画像を表示して編集できます~

効果は次の図に示すとおりです。

1. 《カラーハイライト》

   CSS カラーのスタイルを設定するために使用できます。CSS に加えて、デフォルトの色が表示されない JavaScript、HTML、JSON などのファイルも色付けします。プラグインは、色名、RGB、RGBA、および16 進数の色を着色します。

効果は次の図に示すとおりです。

1. 《ハイライト-アイスモード》

   同じコードが選択されたときに強調表示をより見やすくします。設定手順：ダウンロードしたプラグインを選択し、拡張機能の設定をクリックし、highlight-icemode.backgroundColorとの中highlight-icemode.borderColorを設定したい色に変更します。または、settings.json を直接開き、コードを追加します"highlight-icemode.backgroundColor": "red", "highlight-icemode.borderColor": "blue"。

   このプラグインをインストールした後、VSCode に付属する強調表示をオフにすることができます"editor.selectionHighlight": false。

1. 《インデント-虹》

   虹のインデント、小さな虹にノーと言う人はいないでしょう！もちろん、デフォルトの色が気に入らない場合は、拡張機能の設定で調整できます。また、小さな虹が気に入らない場合は、色付きのラインに変更することもできます。

1. 《ブラケットペアカラーライザー》

   このプラグインは、ペアになったブラケットを色分けし、接続線を提供します。コード構造を確認するのに便利です。

   ただし、このプラグインは現在非推奨となっており、@id:editor.bracketPairColorization.enabled @id:editor.guides.bracketPairs設定バーに「:」と入力することで対応する設定インターフェースにジャンプし、以下の内容を確認することでハイライト表示を実現できます。

効果は次の図に示すとおりです。

フォーマット変換プラグイン

1. 《マークダウンプレビューの強化》

   Markdown ファイルをプレビューおよび編集するための拡張機能。リアルタイム プレビュー、カスタム CSS スタイル、数式のサポート、グラフのサポート、PDF/HTML のエクスポートなど、豊富な機能を提供します。この拡張機能は、Pandoc を介した Markdown ファイルの他の形式への変換もサポートし、Mermaid や PlantUML などのツールを介したフローチャートや UML 図の生成もサポートします。

   MarkdownをPDFに変換する手順をご紹介します 詳細はMPE公式サイトをご覧ください

   変換手順:

   (1) ファイルオプションをクリックして、変換する md ファイルを開きます。

   (2) 開いたMDファイル上にマウスカーソルを合わせたまま、右键/ctrl+右键[MPE: 開いた側プレビュー]オプションを選択します。

   (3) カーソルが右側のプレビュー ボックスに留まり、[右键/ctrl+右键ブラウザで開く] を選択します。

   (4) 開いたブラウザページで、ctrl+p、印刷ページが表示され、「pdf として保存」を選択し、ヘッダーとフッターを追加するかどうか、拡大率などを設定できます。次に、「保存」をクリックします。

   3 番目のステップは OK です右键。Chrome (Puppeteer) を選択し、 を選択してPDF、PDF 形式に変換します。

1. 《JavaScript ブースター》

   コードとそのコンテキストを分析することで、コードをリファクタリングまたは強化するための簡単なアクションを自動的に提案します。リファクタリング条件、宣言、関数、TypeScript、Promise、JSX などの複数のコード操作をサポートします。左側の電球に注目して押して、カーソルの下のコードを翻訳する方法を学びましょう。

効果は次の図に示すとおりです。

スクリーンショットと描画プラグイン

1. 《Draw.io の統合》

   このプラグインは、draw.ioの機能を VSCode に統合し、開発者がダウンロードして使用できるプラグインにパッケージ化しています。VSCode を使用して、完璧なフローチャート、マインド マップ、UML 図を直接描画できます。壁割れ推奨！！！

   プラグインの使用: 新しいドキュメント ファイルを作成し、サフィックスをdrawio に変更し、VSCode を使用してファイルを開きます。

描画ページ:

1. 《ポラコード》

   コード スクリーンショット ツールを使用して、コード編集ページを開き、 を押しCtrl + Shift + P、 と入力しますpolacode。開いたら、コード ブロックをコピーして、開いたプラグイン インターフェイスに貼り付けます。形式に問題がある場合は、まずVSCode のShift + Tab左端に逆インデントを使用してからコピーします。(Web バージョンのコード スクリーンショット ツール: Codepngを推奨します)

効果は次の図に示すとおりです。

著者：ヤオナン
著作権は作者に帰属します。商業的転載の場合は著者に連絡して承認を求め、非商業的転載の場合は出典を明記してください。