概要
JavaScript の変数の説明を JSDoc で書き、VSCode でその変数にカーソルをあてると、ツールチップにコメントが表示される。
例
/** ここにコメントが表示される */
const hoge = "hoge";
上のように書くと、以下のように表示される。
![スクリーンショット 2019-11-09 23.15.08.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F235445%2F322f9341-cab2-55fc-5187-88b1ba4e7f49.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b25fc1104d902ad1594a6c86a5c703a1)
その他
関数
関数の説明も同様、かつ引数の説明も表示される。
/**
* ここにコメントが表示される
* @param fuga 第1引数のコメント
* @param piyo 第2引数のコメント
*/
function hoge(fuga: string, piyo: string) {
console.log(fuga, piyo);
}
![スクリーンショット 2019-11-09 23.43.35.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F235445%2Fd6ce90ec-9ddb-51eb-f2e7-b8063bf4356b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=116fd297e0a59f44b1ae61ebe308cc0f)
オブジェクト
/** hoge のコメント */
const hoge = {
/** fuga のコメント */
fuga: "fuga"
};
console.log(hoge.fuga);
hoge
にカーソルをあてると、 hoge
の上のコメントが表示される。
![スクリーンショット 2019-11-09 23.55.19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F235445%2F1da7042e-b488-fa3f-91ad-49655d065569.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0f58f2ba1a3bd9c4ac8c8d6856c27810)
fuga
にカーソルをあてると、 fuga
の上のコメントが表示される。
![スクリーンショット 2019-11-09 23.55.36.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F235445%2Ffd642df0-cc7d-3866-7d28-8d5f05f35f71.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=354d0a423f15ee0ba62c28f1e235703a)
使い所
原則、使わなくて済む方がいい。その際には、
- コメントなしで意味が伝わる命名をする
- 関数の引数は命名だけでなく、TypeScript の型で情報量を増やす