sitateru tech blog: Visual Studio Code

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル Visual Studio Code の投稿を表示しています。 すべての投稿を表示
ラベル Visual Studio Code の投稿を表示しています。 すべての投稿を表示

2018年12月17日月曜日

【備忘録】Visual Studio Codeで文字検索範囲が広すぎるときに疑う箇所

12月 17, 2018

こんにちは!
シタテル株式会社エンジニアのいしづかです。

みなさんはコードを書く時、どんなエディタを使ってらっしゃるでしょうか。

現在開発が続いているシタテルコントロールシステムのバックエンドはRailsで書かれています。

開発メンバーはそれぞれ自分が合うエディタを使っています。Ruby Mine使っている人もいますし、Atomもいたような・・・。

わたしはVisual Studio Codeを使っています。え?Vimであらずは人であらず?いや、まぁ、えへへ。

コードを書いているとコード内検索をかけたくなります。その際にはnode_modules配下とかは最初から外しておきたいものです。

今回はVisual Studio Code限定ですが、除外設定でハマったので備忘録としてその内容を書こうと思います。

Visual Studio Codeの除外設定

Visual Studio Codeの除外設定は大きく2つあり、 Files ExcludeSearch Exclude があります。

Files Excludeにパスを登録すると、その配下はエクスプローラー上にすら表示されません。Visual Studio Codeからは完全に管理対象外となり、当然検索にも引っかからなくなります。

Search Excludeにパスを登録すると、エクスプローラー上には表示されますが、検索に引っかからなくなります。

よって、検索の除外対象は「Files Exclude」+「Search Exclude」ということになります。

わたしがSearch Excludeに登録しているのは

の4つです。もうちょっと増やしてもいいかなと思うんですが、必要最低限で運用しています。

設定完了であるはずが、、、アレ、logの中身とか検索対象になってる。。。

パターンの書き方が間違っているのか?
設定する箇所が間違っているのか?

アレコレ試した挙げ句、最終的にたどり着いたのは

このボタンがONになっていないだけでした。。。

デフォルトではONでなにかのときにOFFにしちゃっていたのかもしれませんが、こんなの気づかないよVisual Studio Codeさん。。。

まとめ

何かを検索したとき、ほしいものがほしい分だけパッと手に入るっていいですよね。

検索範囲を適度なものに調整しておくのはコードを書くときのストレスを軽減してくれると思います。

かく言うわたしが、この除外設定が効いていなかった数十分間はストレスフルな状態でした。

他の開発メンバーがどんなチューニングを行っているかちょっと気になるところです。どんなプラグイン入れているかとか聞けたらレポートしたいと思います。

2018年11月21日水曜日

Visual Studio CodeでNuxt.jsにデバッガをかける

11月 21, 2018

こんにちは!
シタテル株式会社CTOの和泉です。

シタテルではフロントエンドの開発にNuxt.jsを使っています。

デバッガをかけてたいときはどうしたらいいんだろうと思って調べていたら良さそうなやり方を見つけたので自分の記録がてら書いておきます。

参考:
https://codeburst.io/debugging-nuxt-js-with-visual-studio-code-724920140b8f

手順

Nuxt.jsのプロジェクトを作る部分は割愛します。

1. package.json に コマンド追加

"scripts": {
  "debug": "node --inspect node_modules/.bin/nuxt",

2. デバッガの設定

デバッガを開く
画像左下の虫マークをクリック

実行の設定
図中「Launch Program」右の歯車をクリックして実行設定を開く

実行の追加
右下「Add Configuration」をクリックして「Launch via NPM」を選択すると実行設定が追加されます。追加後はlaunch.jsonファイルを保存してください。

3. デバッガの実行

デバッガの実行
追加された「Launch via NPM」を選択して再生ボタンを押すとデバッガが実行されます。

デバッガの実行
ブレークポイントは debuggerと記述

デバッガの実行
ブレークしたところで変数などを確認できます。

以上、簡単ですがNuxt.jsにデバッガをかけられるようになりました。