VSCodeは「なんか玄人向けのツールで、怖い。」みたいなイメージを払拭したい。
使い慣れたらもう他のエディタは無理になってしまうくらい便利と思うんですよ。
VSCodeが仕事しているような気分になれます。他にも便利なプラグインあったら教えて欲しいです。
１つにまとまってて高機能です。
npmもgitも付いてきて、これで無料はすごすぎます。
Japanese Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
日本語の表示に変更する。英語が苦手な人はコレ入れるべき。
Atom One Dark Theme
https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark
「Atom」の標準的なテーマっぽいテーマ。Atomのような見た目になる。Atomに慣れてるならば、違和感なく乗り換えられます。
Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Visual Studio IDE、または「Sublime Text」と同じように、
HTML/XMLの終了タグを自動的に追加します。閉じタグのある言語では大活躍。
Auto Import - ES6, TS, JSX, TSX
https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import
使用可能なすべてのインポートに対して、コードアクションとコード補完を自動的に検出、解析、提供します。
JavaScriptおよびTypeScriptで動作します。
Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
開始タグ<div>を<p>に打ちかえたら、閉じタグ</div>も</p>に変わるようになります。
Beautify
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
JS、JSON、CSS、Sass、HTMLを美化。「.jsbeautifyrc」ファイルを読んで、コードをスタイリングできます。
「コーディングルール」が厳しい時に設定しておくと文句を言われないヤツ。
Bookmarks
https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
重要な位置間を簡単かつ迅速に移動し、コード内を移動するのに役立ちます。
コードを検索する必要はもうありません。また、ブックマークされた行とブックマークされた行の間の領域を
選択できる選択コマンドのセットもサポートしています。ログファイルの分析に非常に役立ちます。
Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
開始タグと閉じタグを色分けしたり、線でつないでくれたりします。これ超オススメ！
Code Runner
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
いろんな言語のコードスニペットまたはコードファイルを実行します。ブラウザ以外で実行される言語には役立つ。
Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
打ち間違いや、不自然な英語などを波線で訂正してくれます。英語のスペルミスが残らないので、納品時も安心。
Debugger for Chrome
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Chrome、その他ブラウザでJavaScriptコードをデバッグします。ブレイクポイントなどを設置できるのが良い。
Duplicate action
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate
ファイルを複製する機能。右クリックから選べます。
ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
.eslintrcを読み込んで、ルールと違うJavascriptの書き間違えを指摘してくれるツールです。
編集している間に書式の間違いに気が付けるので、勉強になります。
Import Cost
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
importやrequireで読み込んでるプラグインが何kBか分かるツールです。
JavaScript (ES6) code snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
ES6の入力補助です。スペルが思い出せない時に、地味に役に立ちます。
JS JSX Snippets
https://marketplace.visualstudio.com/items?itemName=skyran.js-jsx-snippets
JSXの入力補助です。Reactを使う時は役に立ちます。
language-stylus
https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus
stylusの入力補助です。シンタックスハイライトもあります。
Latest TypeScript and Javascript Grammar
https://marketplace.visualstudio.com/items?itemName=ms-vscode.typescript-javascript-grammar
最新のTypescriptの文法でも、シンタックスハイライトしてくれます。
Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
htmlをサーブできる簡易サーバーです。ライブリロード、https、CORSなどに対応しています。
Local History
https://marketplace.visualstudio.com/items?itemName=xyz.local-history
Gitにコミットしてないけど、ちょっと前の状態に戻したい、という時に役に立ちます。
これがあることで、安心して大胆に消せる、チマチマコメントアウトしなくて良いという側面もあります。
Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
画面の左がにぎやかになります。
npm
https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script
VSCodeからNPMスクリプトをボタンポチポチで実行できるツール。nodebrew入れてると上手く動かない、かもです。
npm
https://marketplace.visualstudio.com/items?itemName=fknop.vscode-npm
こっちはコマンド入力が可能なやつです。パッケージのインストールに。
Path Autocomplete
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete
「./../../../あれ？今どこの階層だっけ？」という時など、その階層のファイルを表示してくれます。
Rainbow CSV
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv
CSVをエディタで開く事はあまりないんですけど、カンマ毎に色分けされているとタテ軸が分かりやすいという代物
React Snippet
https://marketplace.visualstudio.com/items?itemName=NicholasHsiang.vscode-react-snippet
「export default class ReactComponent extends PureComponent…」
こんなの覚えてられない！という人には使えると思います。
Regex Previewer
https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
正規表現で実行される結果が、事前に分かるというものです。
エディタにTest Regexが出てきてちょっとウザいです。
stylus
https://marketplace.visualstudio.com/items?itemName=Alan.stylus
シンタックスハイライト
ToDo+
https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-todo-plus
ToDo管理をVSCodeでやってしまおう、というツールです。何もそこまでVSCodeでやらなくても、と思っちゃうんですが
Trello、Asana、Jiraとか色んなツールに書くよりは自分で把握しやすいかもです。
TSLint
https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin
tsconfig.jsonを読んでTypescriptの記述間違いを指摘してくれるツールです。
TsLintVue
https://marketplace.visualstudio.com/items?itemName=prograhammer.tslint-vue
Vueでｔｓを使う時にミスを指摘してくれる、ツールです。
TSX Snippets
https://marketplace.visualstudio.com/items?itemName=thezhir.vscode-snippets
「export class [FileName] extends React.Component {...」
うーんも頭痛くなりそう、っていう人にオススメです。
Vetur
https://marketplace.visualstudio.com/items?itemName=octref.vetur
Vueの文法から、入力補助から、なんでもやってくれるオールマイティなツール。
vscode-react-pug
https://marketplace.visualstudio.com/items?itemName=kaminaly.vscode-react-pug
あまり使う人がいないと思うけど、Reactの中でpugを使った時にシンタックスハイライトができます。
vscode-styled-jsx
https://marketplace.visualstudio.com/items?itemName=blanu.vscode-styled-jsx
Reactでstyled-jsxを使う時に、シンタックスハイライトされます。
Vue 2 Snippets
https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
ちょっと昔の書き方のVueのシンタックスハイライトです。
Vue Peek
https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek
Vueの親コンポーネントから子コンポーネントを開いたりするツールです。
Vue TypeScript Snippets
https://marketplace.visualstudio.com/items?itemName=ducksoupdev.Vue2
Typescriptどう書くか全然わからない時に、スニペットが便利です。
Trailing Spaces
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces
一番うしろによく半角スペース残しちゃう事がありますが、それを赤く表示してくれます。