`console`がimportされてうっとうしいのを解決する方法

はじめに

console.logを打ちたいだけなのに、import { log } from "console";が勝手にimportされてエラーになる...なんてことはありませんか？

Next.jsで開発しているとあるあるだと思うのですが、これが発生するとエラーになり少しうっとうしいのですよね。

今回はそれを解決する方法を紹介したいと思います。

解決法

VSCodeのSnippets機能を使う

これを使用すると....

このように、勝手にimport { log } from "console";を追加されることがなくなります！

手順

1. 任意の拡張子のsnippetsファイルを作成
2. .vscode/setting.jsonに追記

この2ステップだけです。
順に解説していきます。

1.任意の拡張子のsnippetsファイルを作成

今回はNext.jsを想定しているので、とりあえず***.tsと***.tsxで設定します。

以下のコマンドをプロジェクトルートにて実行します。

• .tsx用

terminal

$ mkdir -p ./.vscode && [ -f ./.vscode/tsx.code-snippets ] && echo "Error: ./.vscode/tsx.code-snippets already exists" || echo '{
  "console.log": {
    "prefix": "log",
    "body": ["console.log('\''$1'\'');"],
    "description": "Log output to console"
  }
}' > ./.vscode/tsx.code-snippets

• .ts用

terminal

$ mkdir -p ./.vscode && [ -f ./.vscode/ts.code-snippets ] && echo "Error: ./.vscode/ts.code-snippets already exists" || echo '{
  "console.log": {
    "prefix": "log",
    "body": ["console.log('\''$1'\'');"],
    "description": "Log output to console"
  }
}' > ./.vscode/ts.code-snippets

Error: ./.vscode/(tsx | ts).code-snippets already existsが表示された場合

ファイルがすでに存在する場合、上書きを防ぐためエラーを出すようにしてあります。
その場合、手作業でファイル内に以下を追加してください。

tsx.code-snippets

{
  ....省略
  "console.log": {
    "prefix": "log",
    "body": ["console.log('\''$1'\'');"],
    "description": "Log output to console"
  }
}

ts.code-snippets

{
  ....省略
  "console.log": {
    "prefix": "log",
    "body": ["console.log('\''$1'\'');"],
    "description": "Log output to console"
  }
}

2..vscode/setting.jsonに追記

1の設定だけでは充分でないので、最後に.vscode/setting.jsonへ追記を行います。

.vscode/setting.json

{
  ...省略
  "editor.snippetSuggestions": "top"
}

この設定を追加することで、snippetsに登録されたものは補完時に優先され、一番上に表示されるようになります。

$\tiny{↑ずっと邪魔してきていた"console"が4番目に...!}$

これで設定は完了となります。

さいごに

こういった集中力が削がれるような小さな問題を積極的に解決して、快適な開発環境を整えていきたいですね。

最後までお読みいただきありがとうございました！