Skip to content

Instantly share code, notes, and snippets.

@hira777
Last active June 20, 2018 07:51
Show Gist options
  • Select an option

  • Save hira777/b0d23f056e19db276604a87dd7a14b74 to your computer and use it in GitHub Desktop.

Select an option

Save hira777/b0d23f056e19db276604a87dd7a14b74 to your computer and use it in GitHub Desktop.

Migrate to VSCode

利用したほうが良いかもしれない拡張

HTML/CSS

ペアになったHTML / XMLタグの名前を自動的に変更する。

HTML/XMLクローズタグを自動的に追加する。

HTMLHintを利用できる。

参照しているCSSファイルなどからクラス名を補完してくれる。

JavaScript

スニペット詰め合わせ。

ES6のスニペット。

Vue.jsの開発を助ける拡張(シンタックスハイライト、補完とか)。

コンポーネント(templateから)またはモジュールインポート(scriptから)として参照されているファイルに素早くジャンプしたり、読み込んだりすることができる。

Git

Gitログ、ファイル履歴、ブランチ比較、コミットの表示など。

VSCodeのGit機能を強化する。最新のコミットによって変更された行を強調したり、行毎のコミット情報を確認などができる。

.gitが存在するプロジェクトを管理する。自分でプロジェクトを登録しなくても、.gitが存在するプロジェクト一覧を表示などをしてくれるため、Project Managerと役割は異なる。

Lint/Formatter/Format

マッチする(ペアとなる)括弧を色分けする。

自分の設定よりも、.editorConfigの設定を優先する(らしい)。

ESLintを利用できる。ファイル保存時にESLintを実行したりできる。

クリックでフォーマッタのオン/オフを切り替えられる(以下の設定が切り替わる)。

"editor.formatOnSave": false
"editor.formatOnPaste": false

個人でPrettier使ってるけど、プロジェクトでは有効にしたくない時とかに使う。

インデントのガイドを表示する拡張。

インデントを見やすくする、インデントがずれている場合、強調表示してくれる。

コードフォーマッタ。Formatting toggleと併用するとワンクリックでフォーマットを有効にするかどうかを変更できる。

末尾のスペースをハイライトする。

User Settingsで以下のような指定をすれば、行末のスペースは自動で削除されるため、必要ない。

// ファイルの保存時に行末の空白をトリミング
"files.trimTrailingWhitespace": true,
// Markdown のファイルは行末の空白をトリミングしない
"[markdown]": {
    "files.trimTrailingWhitespace": false
}

Oher

行にマークを付けてジャンプする。

typoチェック。

高速のカーソル移動。

package.jsonで定義されたnpmスクリプトの実行と、package.jsonで定義された依存関係に対してインストールされたモジュールの検証をする(モジュールがインストールされているかどうかとか)。

タイピング時にド派手なエフェクトが出る。

プロジェクトを管理する。

設定をGistに保存して、異なる端末間で同期する。

エクセルをプレビューできる。

現在開いているファイルのサイズをステータスバーに表示する。

VSCodeを日本語にする(デフォルトではいってるかも)。

Icon

アイコン。

アイコン。

アイコン。

よく紹介されているが、VSCodeのアップデートにより利用する必要がなくなった(多分)拡張

import構文でnpmモジュールを補完する。

ファイル名やファイルパスを補完する。

個人的にお勧めしない拡張

インポートしたパッケージ(モジュール)のサイズを表示する。たまにCPUに使用率がとんでもないことになって火を吹くのでわざわざ利用する必要はないと思う。

マークダウンを開いた時に自動でプレビューが開く。今まで開いたタブが勝手に閉じるため非常に使いづらい。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment