HOME > TECHNOLOGY > ツール

Visual Studio Codeでyarnをデフォルトにする

vscode+yarn

WEBデザイナーのみなさん、VSCode(Visual Studio Code)使ってますか?

少し前までのWEBデザイナーの人気エディターはSublimeTextAtomだったと思います。
個人的にはBracketsが好みだったので、しばらくの間Brackets派だったのですが、2年ぐらい前にVSCodeに乗り換えました。

VSCodeは他のエディターと比べ、GitやTerminalが強力です。
フロントエンドの開発なら、ほぼプラグインなしで使うことができます。
私の環境では、プラグインは5個しかインストールしていません。

超軽快です!

最近のフロントエンド開発では、なんらかのNode.jsタスクを実行するのは当たり前になってきました。
VSCodeはタスク実行環境からみると、数あるエディターの中でもかなり強力だと思います。

WEBデザイナーとっては、VSCode最強ですね!

今回はプラグインなしでyarnのタスクを便利に扱う方法をご紹介したいと思います。

サイドバーからのScript実行

VScodeでnpmやyarnのScriptをどうやって実行していますか?

ターミナルから実行

まず思いつくのはターミナルから

$ npm run 

を叩く方法ですね。

WEBデザイナーが最も苦手なコマンドを打つという方法です。
ちょっと面倒ですね。

ビルドタスクを実行

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "dev",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

上記のようにタスク構成を定義して、ショートカット「shift + command + B」で実行ビルドタスクが実行できます。

ターミナルから直接コマンド実行するより格段に早いです。
ちなみにbuildタスクは構成を定義すれば幾つでも追加できます

サイドバーから実行

エディターの設定から「Npm: Enable Script Explorer」を検索します。
チックボックスが表示されますのでチェックしましょう。

vscode setting01

次にサイドバーの「エクスプローラー」のあたりを右クリックして表示された「NPMスクリプト」の項目にチェックを入れます。

そうすると、サイドバーに「NPMスクリプト」という項目が表示されるようになります。
vscode sidebar

package.jsonに定義したScriptが自動で表示されるので、後は該当のScriptをクリックするだけでタスクを実行できます

npmからyarnへデフォルトを変更

npmの実行は問題ないことがわかりましたが、yarnはどうでしょう?
デフォルトだとタスクはnpmが実行されてしまいます。

実はプラグインなしでもyarnを実行することが可能なことをご存知でしたか?

エディターの設定から「Npm: Package Manager」を検索します。

vscode setting02

プルダウン リストからyarnを選択します。

確認のためビルドタスクを実行してみてください。
yarnでタスクが実行されていることを確認できると思います。

yarn run dev

yarn派の方は嬉しい機能ですね!

ぜひお試しください。

Node.jsパッケージはYarnで管理する【WEBデザイナーのためのMac強化計画 #3】
Node.jsのパッケージ管理はnpmでできます。
ところがこのnpm、あまり評判がよろしくありません。
そこで、FaceBookが中心となり、新しいNode.jsのパッケージマネージャーyarnが開発されるに至ったのです。
互換性もあるので、パッケージ管理はYarnでやることをおすすめします。

田畑を耕しながら田舎でのんびりWEB開発?
若い頃から準備すれば誰にでもできますよ!
今に疲れているクリエイターの方々の少しでも参考になれば嬉しいです。