えんぴつぶろぐ

子育て中のフロントエンドエンジニアのブログ。

トップ > フロントエンド > Vue.jsとブログのためにSublimeTextからVS Codeに乗り換えたメモ

Vue.jsとブログのためにSublimeTextからVS Codeに乗り換えたメモ

フロントエンド VS Code 備忘録

今までエディターはSublime Textを使っていたのですが、ついにVisual Studio Codeへ乗り換えることにしました。

いきさつ

最近久しぶりに自宅でコーディングをしています。
主にVue.jsで遊んでいるのですが、Sublime Textにストレスを感じ始めたので、良い評判を耳にしていたVisual Studio Codeにいっそ乗り換えちゃおうと思い至りました。
ブログも始めたので記事を書くための快適なエディターが欲しい、というのも理由の1つです。

Sublime Textはまともに使える状態にするまでに多くのPackageと設定が必要

会社ではSublime Textを使っているメンバーが多いため、Sublime Text向けの設定Wikiが充実しており、コーディングルール統一のための設定ファイルも共有されています。
が、いかんせん設定項目が多いのでいちからセットアップするなると数時間かかる、なんてこともあります。
一度やれば良い手順ではあるのですが、マシンリプレイスのときや、たまに自宅でコーディングする際に会社の設定と同期するのが非常に面倒でした。 最低限必要となる、SJIS対応や各種ファイルのシンタックスハイライトのためにもPackageのインストールが必要というのは、やっぱり手間だなあと…。

Sublime Textの動作の重さが気になる

普段の業務では大規模サービスの開発をしています。
プロジェクトのフォルダー内に存在するファイル数が日々増えていくため、かなり動作がもっさりしてました。
Command Paletteを開くと1〜2秒待たされます…。
VS Codeを使ってるメンバー曰く、「VS Codeはそんな重くない」とのことだったので期待をこめて。

VS Codeにはブログを書くにあたって便利そうなプラグインがある

一番の理由としては、ブログを書くにあたって「テキスト校正くん」を使いたかったからです…

ics.media

また、Clipboardの画像を簡単にMarkdownファイル内に貼り付けられる、Paste Imageも便利そうでした。

marketplace.visualstudio.com

参考リンク

Visual Studio Codeについての詳しい紹介はこちら

eng-entrance.com

こちらの記事は大いに参考にさせてもらいました。
Vue.js開発のために必要なExtensionから設定ファイルの変更方法まで、丁寧に説明されています。

qiita.com

やったこと

Extensionのインストール

gitやビルドの実施についてはVS Codeで操作するつもりがなく、まずは ターミナル を使えばいいやと思ったので特にExtensionは入れていません。

f:id:empitsu88:20181031144654p:plain
追加したExtensionの一覧です。

User Settingsの変更

  • User Settings
{
    //半角スペースを表示する
    "editor.renderWhitespace": "all",
    //タブのサイズをSpace2つ分に
    "editor.tabSize": 2,
    //prettierで末尾のセミコロンを無効に
    "prettier.semi": false,
    //prettierでシングルクオートに変換する
    "prettier.singleQuote": true,
    //Vue.jsで使うfomatterをvs-code-typescriptに設定
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.ts": "vscode-typescript",
    //Veturのリント、エラーチェックを有効にする
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "vue",
          "autoFix": true
        }
    ],
    //ファイル保存時にフォーマットする
    "eslint.autoFixOnSave": true,
    // prettierとESLintの統合
    "prettier.eslintIntegration": true
}

所感

ここまでのセットアップが、短時間にサックとできて感動しました。。。
標準搭載されている機能が充実しているというのはこんなにもストレスフリーだったとは。
操作も直感的ですし、キーバインドもSublime Textに近いためマニュアルをしっかり読まなくても特に不自由なく使えています。

業務用のプロジェクトはまだ試せていませんが、「VS Codeはそんな重くない」言説が本当かどうかも今後確かめてみたいと思います。