【VScode拡張機能】コーディングの高速化

ショートカットキー

CTRL+B　左ナビの展開・閉じ

CTRL+SHIFT+E　フォルダ階層表示

CTRL+SHIFT+X　拡張機能表示

マスト

Prettier – Code formatter

JavaScript、TypeScript、CSS、HTMLなど、さまざまなプログラミング言語をサポート

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

marketplace.visualstudio.com

Prettier SQL VSCode

Prettier SQL VSCode - Visual Studio Marketplace

Extension for Visual Studio Code - VSCode Extension to format SQL files

marketplace.visualstudio.com

Polacode

Polacode - Visual Studio Marketplace

Extension for Visual Studio Code - 📸 Polaroid for your code

marketplace.visualstudio.com

CodeSnap

コードのスクリーンショットを簡単に撮ることができます。共有可能な画像ファイルを生成するため、ドキュメンテーション、チュートリアル、SNSプラットフォームでのコードの共有に便利です。

CodeSnap - Visual Studio Marketplace

Extension for Visual Studio Code - 📷 Take beautiful screenshots of your code

marketplace.visualstudio.com

Code Runner

VS Code内からさまざまなプログラミング言語のコードスニペットや、ファイル全体を素早く実行することができる拡張機能です。コードエディターと別のターミナルを切り替える必要がなくなり、コードのテストと実行を効率化することができます。

Code Runner - Visual Studio Marketplace

Extension for Visual Studio Code - Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH...

marketplace.visualstudio.com

Path Intellisense

コード内のファイルパスを高度に自動補完し、ファイルパスの入力を簡素化します。プロジェクト内でファイルやモジュールを参照する際のタイプミスをなくし、正確性を高めることができます。

Path Intellisense - Visual Studio Marketplace

Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenames

marketplace.visualstudio.com

Live Server

Live Serverを利用して、ローカルサーバーを立てているので、リアルタイムに変更が反映され、確認する事ができる仕組み

Live Server - Visual Studio Marketplace

Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

marketplace.visualstudio.com

アイコン/装飾/

Night Owl

美しいVS Code用テーマ。目に優しい落ち着いた色調のテーマを実装することで、眼精疲労が軽減され、コーディング作業が捗ります

Night Owl - Visual Studio Marketplace

Extension for Visual Studio Code - A VS Code theme for the night owls out there. Now introducing Light Owl theme for day...

marketplace.visualstudio.com

Material Icon Theme

Material Icon Theme - Visual Studio Marketplace

Extension for Visual Studio Code - Material Design Icons for Visual Studio Code

marketplace.visualstudio.com

vscode-icons

デフォルトのファイルアイコンを魅力的かつ直感的なアイコンに置き換えることも。

vscode-icons - Visual Studio Marketplace

Extension for Visual Studio Code - Icons for Visual Studio Code

marketplace.visualstudio.com

Better Comments

コードに色分けされたコメントを追加し、異なるタイプのコメントを簡単に区別できるようになります。また、接頭辞を使って重要なメモ、TODO、警告などを強調表示することも。

Better Comments - Visual Studio Marketplace

Extension for Visual Studio Code - Improve your code commenting by annotating with alert, informational, TODOs, and more...

marketplace.visualstudio.com

 

HTML/CSS/JavaScript/

Auto Rename Tag

開始タグまたは終了タグを変更すると、HTMLまたはXMLタグの名前も自動的に変更される便利な拡張機能です。

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

marketplace.visualstudio.com

Auto Close Tag

自動で終了タグを挿入してくれる機能

Auto Close Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

marketplace.visualstudio.com

HTML CSS Support

HTMLファイル内のCSSサポートを強化してくれます。CSSプロパティのインテリジェントな提案と自動補完が特徴で、高速かつ正確な記述を行うことができます。

HTML CSS Support - Visual Studio Marketplace

Extension for Visual Studio Code - CSS Intellisense for HTML

marketplace.visualstudio.com

HTML Boilerplate

HTML Boilerplate - Visual Studio Marketplace

Extension for Visual Studio Code - A basic HTML5 boilerplate snippet generator.

marketplace.visualstudio.com

JavaScript (ES6) code snippets

JavaScript (ES6) code snippetsは、JavaScriptコードを書く時間と手間を削減できる、便利なコードスニペットを揃えています。

JavaScript (ES6) code snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Code snippets for JavaScript in ES6 syntax

marketplace.visualstudio.com

ESLint

リンターと呼ばれる機能で、JavaScriptとTypeScriptのエラーを検出して、コーディング標準を実施し、コードの質を高めてくれます。

ESLint - Visual Studio Marketplace

Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

marketplace.visualstudio.com

htmltagwrap

選択テキストをHTMLタグですぐ囲めるようになる

htmltagwrap - Visual Studio Marketplace

Extension for Visual Studio Code - Wraps selected code with HTML tags

marketplace.visualstudio.com

React/Next.js

ES7+ React/Redux/React-Native snippets

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable....

marketplace.visualstudio.com

React-Native/React/Redux snippets for es6/es7

React-Native/React/Redux snippets for es6/es7 - Visual Studio Marketplace

Extension for Visual Studio Code - Code snippets for React-Native/React/Redux es6/es7 and flowtype/typescript, Storybook

marketplace.visualstudio.com

PHP

PHP Intelephense

PHP Intelephense - Visual Studio Marketplace

Extension for Visual Studio Code - PHP code intelligence for Visual Studio Code

marketplace.visualstudio.com

 

 

python/Django/Flask

Python

Python開発者に必要不可欠。開発作業を効率化する機能一式が揃っており、Pythonコードの記述、デバッグ、テストを容易にします。

Python - Visual Studio Marketplace

Extension for Visual Studio Code - Python language support with extension access points for IntelliSense (Pylance), Debu...

marketplace.visualstudio.com

Pylance

Pythonの言語サポート機能。Pythonコードのインテリセンス、コードナビゲーション、タイプチェックなどを強化してくれます。

Pylance - Visual Studio Marketplace

Extension for Visual Studio Code - A performant, feature-rich language server for Python in VS Code

marketplace.visualstudio.com

Jupyter

VS Code内でJupyter Notebookを操作することができるようになる拡張機能。Jupyterのインタラクティブなコンピューティングの性能とVS Codeの機能と生産性をシームレスに統合することができます。

Jupyter - Visual Studio Marketplace

Extension for Visual Studio Code - Jupyter notebook support, interactive programming and computing that supports Intelli...

marketplace.visualstudio.com

Jinja

Jinjaテンプレート言語の言語色化サポートがVSコードに追加されます。

Jinja - Visual Studio Marketplace

Extension for Visual Studio Code - Jinja template language support for Visual Studio Code

marketplace.visualstudio.com

Jinja2 Snippet Kit

HTMLファイルを開き、Jと入力して、利用可能なすべてのスニペットの完全なリストを表示します。

Jinja2 Snippet Kit - Visual Studio Marketplace

Extension for Visual Studio Code - Jinja2 snippets for cool attractive people to use in your HTML templates.

marketplace.visualstudio.com

Django

その名の通り、VS CodeでのDjangoウェブフレームワーク開発のために特別に設計された拡張機能。Djangoプロジェクトの生産性を高めるさまざまな機能が組み込まれています。

Django - Visual Studio Marketplace

Extension for Visual Studio Code - Beautiful syntax and scoped snippets for perfectionists with deadlines

marketplace.visualstudio.com

Flask Snippets

Flaskウェブフレームワークのコードスニペットを揃えた便利な拡張機能です。Flaskの一般的なパターンやショートカットに使えるスニペットを活用して、Flaskのコーディング作業を簡素化することができます。

flask-snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Flask snippets

marketplace.visualstudio.com

★Tabnine AI Autocomplete

コード補完を次のレベルに引き上げてくれる、AIを活用した自動補完拡張機能。大量のコードを学習した高度な機械学習モデルによって、非常に正確でコンテキストを考慮したコード候補が表示されます。

Tabnine: AI Chat & Autocomplete for JavaScript, Python, Typescript, Java, PHP, Go, and more - Visual Studio Marketplace

Extension for Visual Studio Code - Tabnine is the AI code assistant that accelerates and simplifies software development...

marketplace.visualstudio.com

GIT

GitHub Copilot

★GitHubとOpenAIによって開発された革新的なAI搭載コーディングアシスタント。膨大なコードを消化した機械学習モデルを搭載し、インテリジェントなコードの提案と補完が提供されます。

GitHub Copilot - Visual Studio Marketplace

Extension for Visual Studio Code - Your AI pair programmer

marketplace.visualstudio.com

サーバー/バックグラウンド

npm Intellisense

npmパッケージのインポート時に自動補完機能が実装され、時間と手間を削減することができます。また、記述中にパッケージ名も提案してくれるため、プロジェクトへの依存関係のインポートも容易です。

npm Intellisense - Visual Studio Marketplace

Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes npm modules in import statements

marketplace.visualstudio.com