2018年12月17日月曜日
【備忘録】Visual Studio Codeで文字検索範囲が広すぎるときに疑う箇所
こんにちは!
シタテル株式会社エンジニアのいしづかです。
みなさんはコードを書く時、どんなエディタを使ってらっしゃるでしょうか。
現在開発が続いているシタテルコントロールシステムのバックエンドはRailsで書かれています。
開発メンバーはそれぞれ自分が合うエディタを使っています。Ruby Mine使っている人もいますし、Atomもいたような・・・。
わたしはVisual Studio Codeを使っています。え?Vimであらずは人であらず?いや、まぁ、えへへ。
コードを書いているとコード内検索をかけたくなります。その際にはnode_modules配下とかは最初から外しておきたいものです。
今回はVisual Studio Code限定ですが、除外設定でハマったので備忘録としてその内容を書こうと思います。
Visual Studio Codeの除外設定
Visual Studio Codeの除外設定は大きく2つあり、 Files Exclude と Search 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にデバッガをかける
こんにちは!
シタテル株式会社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にデバッガをかけられるようになりました。