はてなブックマーク

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はBookmarksです。 文字通りコード内のブックマークを保存していく機能です。 marketplace.visualstudio.com 機能 エディタ内 コンテキストメニューまたはWindowsですとAlt+Ctrl+Kで指定行のブックマークのオンオフができます。 サイドバー エクスプローラー内でブックマークしたファイルについてはサイドバーのしおりのようなタブから確認できます。 ファイル別にブックマークが集約されているので見やすいですね。 サイドバーからブックマークの削除もできます。 あとがき プロジェクトの規模が大きくなりファイル数が増えた時に便利な拡張機能です。 検索処理も早いのですが、よく見る箇所についてはブックマークの利用をするとよいですね。

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はSwagger Viewerです。 Visual Studio Code上でSwagger Editorを使用できる機能です。 marketplace.visualstudio.com 起動の方法 エクスプローラーのコンテキストメニューから起動できます。 コマンドパレットからも起動できます。 起動後 基本的にはSwagger Editorと同様です。 対象のyamlを編集するとリアルタイムで反映されます。 注意点 Swagger Viewerを使用する場合、 localhost:9000 を使用するようです。ポート番号がかぶる場合は他のもののポートを変えるか、拡張機能を一時的に無効にすることが必要です。 あとがき Swagger YAML を Visual Studio Code で編集できるので便利

概要 declare global + interface で追加したいメソッドを追加後、prototypeにメソッドを追加します。 拡張メソッドを利用したい場合は、importをすることで利用できます。 詳細についてはサンプルソースを確認。 ちなみに拡張メソッドは他の開発言語でもあります。 用途としては、型に依存した共通処理等を追加すると生産性があがります。 動作環境 TypeScript 2.7.x サンプルソース number.extensions.ts 拡張メソッドの定義側です。今回はnumberに拡張メソッドを追加します。 // TypeScriptファイル内でexportを利用していない場合は、export{};を定義 export {}; // 拡張メソッドの定義 declare global { interface Number { /** 3の倍数:Fizz, 5の倍数:

概要 Visual Studio Code の TSLint拡張機能と tslint-plugin-prettier を使用してソースコードを自動フォーマットすることが出来ます。 各種設定や使用ライブラリ等を記載します。 marketplace.visualstudio.com github.com 実行環境 Node.js - 10.x Yarn - 1.13.x Visual Studio Code - 1.31.x TSLint - 1.0.0 （TSLintはMS提供の方を使用します。） 使用ライブラリ TypeScript - 3.2.x TSLint - 5.11.x prettier - 1.16.x tslint-plugin-prettier - 2.0.x tslint-config-prettier - 1.18.x 設定 ライブラリのインストール 以下のライブラリを

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はGitLensです。Gitを利用している場合にとても便利です。 ※GitLens Version 8.5時点の情報です。 marketplace.visualstudio.com 機能 エディタ内 エディタのコード上にいつ・誰がコミットしたかの概要が表示されるようになります。 マウスオーバー時に直前のコミットとの変更内容が表示されます。 Blame よくあるBlame機能です。エディタの右上にあるGitボタンで切り替え可能です。 History サイドバーにGitLensが追加されて、Gitのリポジトリ情報が確認できます。 履歴や変更内容等も確認できます。 あとがき IDEにあるような機能もどんどん拡張機能できるので、各自が使いやすいようにカスタマイズできるのがVisual Studio Codeの強