VS-codeの便利な機能7選を紹介！【Day2】
どうも！ひぐです！
#100DayOfCodeの二日目です！
今日はVS-Code（VisualStudio-Code)の便利なショートカットを
ご紹介したいと思います！
VS-codeってのは、マイクロソフト社が作っている、エディタです。
完全無料で、すごーく高機能&軽いわりに知名度が低いやつです。(笑)
どんだけすごいかっていうとこんな感じです↓
今まで何となくエディタAtom使ってたけど、VS-codeに変えたら
— ひぐ React勉強中 (@zerebom_3) 2018年6月8日
・pathが通ってるターミナル付き
・Emmet標準装備
・めっちゃ軽い
・補完が強すぎる
(bacpo→background-positionみたいな）
・カーソル合わせるとメソッドの説明が表示される
・カラーコードが色で表示
などなど強すぎる…！😭
これについて紹介したいと思います！
今日の記事はAtomを現在なんとなーく使っている人に向けて、
Atomとの違いを含めて紹介したいと思います！
ドットインストールやProgateではAtomがおすすめされますが、かなり重いので
良かったらこの機に移行してみてください！
移行も思ったより簡単ですよ！
ダウンロード方法
もうすでにダウンロードしている方はとばしたってください
便利な機能の紹介
1．パスの通ったterminal
他のエディタと同様に左上のファイルから、フォルダまたはファイルを開いて、
コーディングしていきます。
Reactなどを使っていると、npm startなどターミナルでの実行を行いたいときがありますよね。
そういったときは画面したの青い部分をホールドして上に伸ばします。
そうすると下から、カラムが出てくると思います。
ここでターミナルを選択すると、パスの通ったTerminalが表示されます！
ここを上に引っ張ると
ターミナルがでてくる
RailsやReactなど、CUIと同時に使いたい言語のときに便利です！
ぜひ使ってみてください(*'▽')
2．Alt+↑or↓で行入れ替え
選択している行を上下に移動させることが出来ます。
ネストから外に出すときなどに便利！
3.Alt+ctrl+↓or↑で複数行選択
似たような行を変更するときに便利です！
この場合、widthを一斉に変更できますね！
4.(ctrl+d＊ｎ回）で同じ単語を選択
現在選択している部分と同じ単語を検索し、自動でカーソルを合わせてくれます。
ctrlを押したまま、dを押した回数だけ検索&選択してくれます
5．alt+zで右端で折り返し
画面が小さいと、端っこが画面外に出て
スクロールしないと見えなくなってしまいますよね。
そういった時はこの機能を使えばOKです。
左と右を比較すると行番号の振り方が変わっているのがわかるかと思います。
6.F5でデバッグ
F5を押していただけると、コードを走らせることが出来ます。
Pythonなどデータ解析系の言語では重宝します。
Shift+F5で中断できます。
7．ctrl+spaceでサジェスト表示
emmetなど使っていると、Tabで展開した際に間違った補完で展開されてしまう場合があります。
そうした時にはctrl＋spaceでもう一度サジェストから選ぶことが出来ます!
せっかちさんには便利！
こんな感じです！よく使うのはこのへんですね～
もし、もっと便利なショートカットがあれば教えていただきたいです！
進捗報告
今日は昨日に続き、HTMLとCSSの模写、
自然言語処理の研究を進めました。
今日模写したのはprogateの中級編、トップページです
フロントエンドエンジニアになりたい！と僕が思った理由は
- デザイナーってなんかおしゃれ
- 受託業務をうけやすそう（大学生でもバイトにしやすそう）
- 見た目が出来ないとテンション上がらない
みたいな、和紙もびっくりなぺらっぺらな動機なのですが、
最近どこまで出来るようになればいいのか、何を学べばいいのか迷ってしまって作業が進まないことが多々あります。。。
今まで自分がしてきた勉強は未来に向けての勉強（中学受験、大学受験など）で、
何をすればいいか、わかり切っていたので楽ちんだったのですが、
プログラミングの勉強にはゴールも道しるべもないので自分から物を作っていくという
気持ちがないとなかなか進まないなと改めて実感しました。。。
モチベーション維持、勉強方法・意図なんかも勉強自身と同じくらい大切だな。
と思いました
しばらくは引き続き模写を続けて、次第に作りたいものを決める&Reactで実装していきたいと思います…！
ではでは～
