8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

VS Code+WSLで簡単ぷろぐらみんぐ用Linux環境構築☆だもん!

Last updated at Posted at 2019-07-03

まえがき

最近Microsoft公式さんがVS Codeにつよつよ拡張機能をリリースしてくれた.その名は †Remote Development†
これはあの大人気つよつよIDEのVS Codeから直接SSHや,Dockerコンテナ,さらにWSLに接続して開発できるだけでなく,接続先にVS Codeの拡張機能をインストールして使えるというやつだ!

今回はそんなつよつよ拡張機能のひとつ,Remote-WSLを利用してラクラク環境構築すりゅよ

この記事を書こうと思った経緯

弊高専のとある学科の2,3年生が授業で扱うC言語の環境を作るため,WindowsのPCにVirtualBoxなどを使って何人かと協力して頑張ってる姿を何度も見てオタク悲しくなった

想定環境

OS: Windows10
User: 人間

そもそもWSL is 何

  • WSLとは"Windows Subsystem for Linux"の略
  • WSLによりLinuxディストリビューションが実行できる
  • 何ができるのか一言で表すと「窓でbashが使える!」

詳しい仕組みとかは以下の記事などが参考になるかと思います
Windows Subsystem for Linuxとは? そのインストールと使い方 - Build Insider

WSLの何が良いのか(07/04追記)

導入が楽!

普通にVirtualBoxでUbuntuをインストールすると数十分かかるのがWSLだとほんの数分で終わる
初期設定も主にユーザ名とパスワードを設定するだけ
パーティションやら,初学者には難しい設定も必要ない!

起動がはやい!

普通ならOSを起動する必要があり数十秒かかるがWSLは秒で起動する

Windows上のファイルにも直接アクセス可能!

普通,ホストOSーゲストOS間で同じ場所のファイルを共有するなら別途アプリが必要

ほかにもVS CodeもWSLもMicrosoft公式のもので互換性も良きだしメモリの割り当てなども惜しまずに済んだり……
とにかく推せる

参考
WSL vs VM for 開発作業
Bash on Ubuntu on Windows (on Mac) つかってみた。


つまりこのWSLとVS Codeを組み合わせると比較的簡単にWindows上でLinuxの開発環境がつくれちゃうわけでちゅね

早速環境をつくってみよう!

  1. こちらの記事を参考にWSLをインストール&初期設定(ユーザ名とパスワードの設定)
  2. VS Codeを公式サイトからDL&インストール
  3. VS Codeで拡張機能**"Remote Development"**をインストール

おわり

ほかに必要なものは$ apt installとかで適宜インストールを

VS Code上でWSLに接続してみよう(9/24追記)

  1. VS Codeを起動
  2. 左下の><みたいなマークのところをクリックし,出てきたポップアップの中からRemote-WSL: New Windowを選択
  3. 新しいVS Codeのウィンドウが開き,Starting VS Code in WSLと通知が来るので,それが消えるまで待つとWSLへの接続が完了する
  4. 「ファイル」→「フォルダーを開く...」から任意のフォルダ(デフォルトはユーザのホームディレクトリ)を選択しOKを押す

この4ステップでVS CodeからWSL上で開発する準備完了!

とりあえずC言語のプログラミング環境を整えよう(9/24追記)

Ctrl + @でターミナルを開けます
ここで$ sudo apt install gccと打って実行するとパスワードが求められた後gccコンパイラのDL&インストールが始まります

終わり!w

Microsoft公式の拡張機能「C/C++」を入れるところまでできたら完璧

VS Codeの使い方(07/04追記)

以下におすすめの記事をいくつか置いときます

とりあえず拡張機能の入れ方、ファイルのつくり方,ターミナルの開き方を知っていれば問題ないかと思います

より良い環境にするために

これでとりあえず環境はできましたがこのままじゃちょっと物足りませんよね
せっかくなのでもっと開発が楽しくなるよういろいろいじって自分好みにしちゃいましょう!

##いろんな拡張機能を入れて一瞬でつよつよエディタに
以下の記事におすすめの拡張機能がたくさんです!

開発が捗る Visual Studio Code 拡張機能

個人的におすすめは「Bracket Pair Colorizer」「Code Runner」「indent-rainbow」「Trailing Spaces」「Visual Studio IntelliCode」「GitLens」「Git History」です!

bashrcをいじってコマンド入力を楽に

ユーザのホームディレクトリ下に.bashrcというファイルがあるかと思います
ここでエイリアスの設定などを書き込めます(コマンドに好きな別名をつけれる)
以下に一例として私の設定の一部を載せておきます

# enable -i by default
alias rm='rm -i'
alias cp='cp -i'
alias mv='mv -i'

# some more ls aliases
alias ls='ls -F --color=auto'
alias ll='ls -alF'
alias la='ls -A'
alias l='ls -CF'

#
alias cat='cat -n'
alias bk='cd ..'

# for git
alias gs='git status'
alias gd='git diff'
alias gc='git commit'
#push='push -f'

うっかり$ sudo rm -rf /して死なないようにalias rm='rm -i'絶対設定しておきましょう

bashrcに書き込んで保存した段階ではまだ設定が有効化されてないので、書き終えたらターミナルでsource ~/.bashrcと打ってEnterしましょう
これでbashrcが読み込まれて設定したエイリアスが使えるようになります!

いつでもキュアピースとじゃんけん!

Cureutilsを使ったプリティでキュアキュアなターミナルライフの実現 - Qiita

↑こちらの記事に導入方法・実行・実行結果例がまとめてあります.幸せになれます

補足

VSCodeからWSLに接続すると自動でlocaleがja_JPになるようで
これをありがたいと思えるかはちょっと微妙…

おわりに

間違ってるところや説明不十分なところなどあればどしどしコメントお願いします!
女児アニメの沼にはまって抜け出せないオジ☆チャンの一人より

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?