Visual Studio Code

Python

Visual Studio Code + Python

型推論

since 2023-03-09

https://mypy.readthedocs.io/en/stable/cheat_sheet_py3.html

【Python】VSCodeが型推論結果を自動で表示してくれるようになった【TypeHinting】

2021年11月 PyCon mini Shizuoka 2021

<html> <iframe width="560" height="315" src="https://www.youtube.com/embed/Mop5dNJnk5A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </html>

<html> <iframe src="www.slideshare.net/slideshow/embed_code/key/IllTfRPGh7R2BN" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="www.slideshare.net/nishimotz/211120-pydebugnishimoto" title="211120 pydebug-nishimoto" target="_blank">211120 pydebug-nishimoto</a> </strong> from <strong><a href="https://www.slideshare.net/nishimotz" target="_blank">Takuya Nishimoto</a></strong> </div> </html>

React

対話型プレイグラウンド

since 2021-07-17

  • 現在は Japanese Language Pack を入れている
  • 現在はデフォルトのキーバインディングで使っている
  • バージョン 1.58.2 の「ようこそ」から表示できる「対話型プレイグラウンド」の内容をここにまとめる
  • キーボードショートカットのないものは省略
  • Windows で操作を確認している

マルチカーソル編集

  • Shift+Alt+マウスドラッグ : ボックス選択
  • Ctrl+Alt+上矢印または下矢印 : 上下の行にカーソルを増やす
  • Alt+マウスクリック : 任意の場所にカーソルを増やす
  • Ctrl+Shift+L : すべての出現箇所にカーソルを作る

コード補完

  • Ctrl+スペース : IntelliSense

行アクション

  • Shift+Alt+上矢印 : 現在の行をコピーしてカーソルを上に移動(現在の行が下にコピーされる)
  • Shift+Alt+下矢印 : 現在の行をコピーしてカーソルを下に移動(現在の行が上にコピーされる)
  • Alt+上矢印 : 現在の行をひとつ上の行と入れ替える
  • Alt+下矢印 : 現在の行をひとつ下の行と入れ替える
  • Ctrl+Shift+K : 現在の行を削除

フォーマット

  • Shift+Alt+F : ドキュメントのフォーマット
  • Ctrl+K Ctrl+F : 選択範囲のフォーマット(ただし black はサポートしていない)

折りたたみ

  • Ctrl+Shift+[ 開き角カッコ : 折りたたみ
  • Ctrl+Shift+] 閉じ角カッコ : 展開
  • Ctrl+K Ctrl+0 : すべて折りたたみ
  • Ctrl+K Ctrl+J : すべて展開
  • Ctrl+K Ctrl+1から5 : インデントのレベルを指定して折りたたみ

分割

  • Ctrl+フルキー数字 : 分割されたグループ(エディタ)の N 番目にカーソルを移動
  • Ctrl+\ : グループ(分割)を増やす
  • Ctrl+K W : グループを閉じる(グループ内のエディタをすべて閉じる)

GitHub Copilot

VSCodeVim

https://github.com/VSCodeVim/Vim

<html> <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">VSCode の Emacs Keymap に挫折してオリジナル配列で覚えなおそうとしていたが、いっそのこと Vim 配列に慣れたほうがいいのではと思い始めた</p>&mdash; にしもつ (@24motz) <a href="https://twitter.com/24motz/status/1257557298542608386?ref_src=twsrc%5Etfw">May 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </html>

https://qiita.com/jintz/items/d357478271179c90ffab

https://qiita.com/kuroyakov/items/e58d0a2ac96df166a088

ビジュアルモード

https://www.atmarkit.co.jp/ait/articles/1106/15/news127.html

ts-check

since 2022-03-20

https://code.visualstudio.com/docs/nodejs/working-with-javascript

JavaScript + React をちょっとずつ型チェックする

jsconfig.json

{
    "compilerOptions": {
        "jsx": "react-jsx",
    }
}

js ファイルの先頭にコメントを追加する

// @ts-check

この段階で「問題」が出たら、直すか、直前の行に

// @ts-ignore

を入れる。

関数やメソッドの引数に、太い点線の下線が表示されるようになる。

マウスホバーすると「パラメーター xxxx の型は暗黙的に any になっていますが、使い方からより良い型を推論できます」と表示される。

クイックフィックス(Ctrl+ピリオド)

「使用状況からパラメーターの型を推論する」

を使えば、例えば下記 formatInt の引数 v は:

// @ts-check
export const formatInt = (v) => {
  return Number(Math.round(v)).toLocaleString();
};

以下のように推論される:

// @ts-check
export const formatInt = (/** @type {number} */ v) => {
  return Number(Math.round(v)).toLocaleString();
};

JSDoc annotations という記法らしい。

https://dev.to/sumansarkar/how-to-use-jsdoc-annotations-with-vscode-for-intellisense-7co

すべてのファイルに ts-check を書くかわりに、jsconfig.json で下記を指定できる。

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "checkJs": true
    }
}

Android WebView Debugging

vscode.txt · 最終更新: 2023/03/09 09:49 by Takuya Nishimoto
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0