VSCode
日本語フォント設定
HackGen
色々試したが、HackGenが英文字がつぶれなくてかなり良い。
https://github.com/yuru7/HackGen/releases
以下は検討したが、英文字がつぶれてカクカクしてしまう。(解像度のせいかもしれんが)
Myrica
Myrica / MyricaMを以下よりダウンロード。
https://myrica.estable.jp/
zip解凍し、ttcファイルをダブルクリックしていインストール。
Ricty Diminished
https://github.com/edihbrandon/RictyDiminished
設定反映
VSCodeのフォントを設定し、VSCodeを再起動。
プラグイン
基本
日本語化。時々英語に戻るので以下で設定する。
既定の UI 言語をオーバーライドするには、Configure Display Language コマンドを使用して、VS Code の表示言語を明示的に設定します。 Ctrl+Shift+P を押して "コマンド パレット" を表示し、display と入力して Configure Display Language コマンドをフィルターして表示します。 Enter キーを押すと、インストールされている言語の一覧がロケールごとに表示され、現在のロケールが強調表示されます。 UI 言語を切り替えるには、別の "ロケール" を選択してください。
編集補助
マルチカーソルで文字列をフォーマット指定して連番を入力できる。
選択範囲を特定のchaseに変更する。
snake_caseやkebab-caseなど。
視認性
インデントを色分けしてくれる。
CSVの視認性向上。
空白を可視化する。
エラーの内容をエディタで見えるようにしてくれる（マウスオーバーする必要がない）
Brancket Pair Colorizer2
カッコを色分けしてくれる。
VSCodeのデフォルトで色分けされるようになったので、今はdepricated。
Python
Python開発の基本。
Pythonのdocstringを自動生成できる。
importをPEP8準拠にしてくれる拡張機能
Pylance
構文チェックや候補を頭良く表示する。
今はPythonプラグインを入れると含まれるため個別に入れなくてよい。
Markdown
MarkdownをPDF変換する機能
Markdownのプレビュー表示が見やすくなる。
drawioの図を書ける。
*.drawio.svgで保存すれば編集も可能で、そのままmarkdownにも埋め込める。
UMLを記述できる。図として出力し、markdownに埋め込める。
出力先はデフォルトはoutになるが、以下の設定で変更できる。
"plantuml.exportOutDir": "plantuml"ある程度GitHubなどの描画側で対応しているところが出始めてるので、使わずに済む将来が来ると良いなと思っている。
クリップボードからmarkdownに画像を張り付けられる。
Snipping Toolとの連携で結構良い。
以下に使い方と推奨設定があるのでご参考。
https://zenn.dev/ktechb/articles/968ff79f8f9c46a26ee5
フォーマッター
自動整形ツール。
あまりメリットをまだ感じられていないが、チーム開発では嬉しいらしい。
TS界隈の開発者は使ってるのをよく見るが、Pythonで使ってる人をあまり見たことがない。
リモート系
VSCodeからサーバーにSSH接続できる。
サーバー上のフォルダもVSCodeでオープンすることが可能
上記のWSL版
実はあまり詳しくない。
コンテナ開発で使うやつ。実はあまり詳しくない。
フロントエンド
htmlタグを自動で閉じる。
htmlタグを自動でリネームできる。
JavaScript (ES6) code snippets
JavaScript開発用（詳細よくわかってない）
ES7+ React/Redux/React-Native snippets
React開発用（詳細よくわかってない）
linter
Vue開発用（詳細よくわかってない）
AWS
コードスニペットの使い方
Visual Studio Codeに定型文（スニペット）を登録する方法
https://slash-mochi.net/?p=1978
VSCodeのUser Snippetを活用しよう！
https://qiita.com/282Haniwa/items/82828c6a566e3e7e047d
snippetの例(styled componentなコンポーネントクラス)
{
// Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"react component": {
"prefix": "react component",
"body":[
"import React from 'react'",
"import styled from 'styled-components'",
"",
"// Props",
"type ComponentProps = {",
" className: string",
"} & $1Props",
"",
"// DOM",
"const Component: React.VFC<ComponentProps> = props => (",
" <div className={props.className}>",
" </div>",
")",
"",
"// Style",
"const StyledComponent = styled(Component)`",
">",
"`;",
"",
"// Props",
"type $1Props = {",
"}",
"",
"// Container",
"export const $1: React.FC<$1Props> = props => {",
"",
" return (",
" <StyledComponent",
" className=\"rootContainer\"",
" />",
" )",
"}",
],
"description": "react component template",
},
}ショートカット
意外と網羅できてないショートカットを自分なりに整理する。
ウィンドウ移動
Ctrl + 数字
複数ウィンドウを移動
Ctrl + Tab
タブ移動
カーソル移動
Ctrl + 左右
単語毎カーソル移動
Ctrl + Home
行頭移動
Ctrl + End
行末移動
マルチカーソル
いくつかやり方がある。
マウスを使用する方法
Alt + マウスクリック
マウス中芯ボタンクリックのドラッグ
Shift + Alt + マウスの右クリックドラッグ
マウスなしで実行可能な方法
Alt + Ctrl + 上下
単語選択 ⇒ Ctrl + D （検索しながらカーソルを増やせる）
編集操作
Alt + 上下
行移動
参考
Last updated