Edited at

ブラウザ不要。更地のWindows PC上に開発環境を整えるまで(e.g. vscodeでVue.js)

More than 1 year has passed since last update.

私用のPCを何年かぶりに新調したので久々に開発環境をゼロから構築しました。もうダウンロードサイトの巡回なんてのは過去の話になったのだなあとしみじみ感心したので、その手順をメモしておきます。


まずは最低限

Scoopでも良いですが自分はChocolatey派です


Win+X,Aで管理者権限のPSを起動して以下を打鍵。

PS C:\WINDOWS\system32>  Import-PackageProvider ChocolateyGet

PS C:\WINDOWS\system32> Install-PackageProvider ChocolateyGet
PS C:\WINDOWS\system32> Install-Package visualstudiocode
PS C:\WINDOWS\system32> Install-Package git
PS C:\WINDOWS\system32> install-package nodejs -MaximumVersion 8.9.4



  • Win+X というホットキーはWindows 7時代にはWindowsモビリティセンターというユーティリティの呼び出しでした。8以降に現在の便利な管理系メニュー呼び出しに変わりました。

  • 注意!パッケージプロバイダは「ChocolateyGet」、です。Windows 標準搭載の「Chocolatey」パッケージプロバイダは何かの間違いなので使わないように。一度使ってしまったが最後、ゴミが以後のInstall-Packageで一々邪魔してきます。一応ゴミを掃除する手段も無くは無いので別途追記します。

  • 昔は -Version でバージョンを直接指定出来てたのと思うのですが今はそのオプションは -RequiredVersion という名前になったようです。 -MaximumVersion だと、試してませんが「8.999.999」とかも指定できそうですね。


後は気が向くまま



  • Install-Packagegooglechrome とか winmerge とか jdk8 とか screenpresso とかも入れられますので適宜どうぞ。vlcやffmpeg、steamなんかも有ります。

  • ひとしきり気が済むまでインストールしたらプロジェクトを作ってみます。最近 Vue.js のお世話になってるので下記はその流れです。

vscodeに拡張機能インストール。先にやらなくても後段の操作中にcodeがリコメンドしてくるのでそこでインストールしても良い。

code --install-extension dbaeumer.vscode-eslint

code --install-extension octref.vetur

プロジェクト作成


codeを起動してターミナルタブを開いて

PS %USERPROFILE%> mkdir vueapp

PS %USERPROFILE%> cd vueapp
PS %USERPROFILE%\vueapp> npm install -g @vue/cli
PS %USERPROFILE%\vueapp> npm install -g @vue/cli-init
PS %USERPROFILE%\vueapp> vue init webpack my-project

出来たmy-projectフォルダをvscodeで開いてESLintの準備


.vscode/settings.json

// Ctrl+, でワークスペースの設定ファイルを開いて下記を追記。ESLint に *.vue ファイルも自動修正させる。

// eslint~ というキー名がエラー(赤下線)になったら、ESLint拡張機能が無効になっている。拡張機能サイドバーで有効化できる。
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{"autoFix": true, "language": "vue"}
]


.eslintrc.js

  extends: [

'plugin:vue/recommended', // essentialは緩すぎるのでrecommendedに変更

テスト実行、起動してみて、下準備が整った事を見届けたらgitのローカルリポジトリを作って初回コミット。

PS %USERPROFILE%\vueapp\my-project> npm run unit

PS %USERPROFILE%\vueapp\my-project> npm run dev
PS %USERPROFILE%\vueapp\my-project> Invoke-WebRequest -Uri https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore -OutFile .gitignore
PS %USERPROFILE%\vueapp\my-project> git config --global user.email "you@example.com"
PS %USERPROFILE%\vueapp\my-project> git config --global user.name "your name"
PS %USERPROFILE%\vueapp\my-project> git init
PS %USERPROFILE%\vueapp\my-project> git add -A
PS %USERPROFILE%\vueapp\my-project> git commit -a -m "init"

何かをインストールするのにブラウザを開かなくて良い というお手軽さのおかげで、ものの数行で何もかも揃ったような気がしましたが、こうして書き出してみるとそこそこ打鍵してますね。


ところで果たして本当にブラウザは不要だったのか

え、ええ。大体は。問題はパッケージ名ですね。vscodeを入れるべく Install-Package vscode と打ち込むと、お目当てとは違う何かが入ってしまったりします。パッケージ名を調べるのは結局Webで……。