Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8920

【Mac】VSCode 開発環境構築 (Java、Gradle、Node.js)

$
0
0

1. Java、Gradle、Nodeインストール

brewインストール

1)以下を実行してインストールする。

ターミナル
/usr/bin/ruby -e"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Javaインストール

1)下記のサイトからJava SE Development Kit u** → Mac OS X → jdk-u**-macosx-x64.dmg をダウンロードし、インストーラを実行する。

Java8(Archive)
Java9(Archive)

2)環境変数の設定(バージョンに合わせて以下を実行)

ターミナル
export JAVA_HOME=`/System/Library/Frameworks/JavaVM.framework/Versions/A/Commands/java_home -v"1.8"`source ~/.bash_profile

3)バージョン確認 

ターミナル
java -version#以下のように出力されればOK
java version "1.8.0_144"
Java(TM) SE Runtime Environment (build 1.8.0_144-b01)
Java HotSpot(TM) 64-Bit Server VM (build 25.144-b01, mixed mode)

Gradleインストール

1)以下を実行してインストールする。

ターミナル
brew update
brew install gradle

2)バージョン確認

ターミナル
gradle -v#以下のように出力されればOK------------------------------------------------------------
Gradle 6.3
------------------------------------------------------------

Build time:   2020-03-24 19:52:07 UTC
Revision:     bacd40b727b0130eeac8855ae3f9fd9a0b207c60

Kotlin:       1.3.70
Groovy:       2.5.10
Ant:          Apache Ant(TM) version 1.10.7 compiled on September 1 2019
JVM:          1.8.0_144 (Oracle Corporation 25.144-b01)
OS:           Mac OS X 10.14.6 x86_64

Groovyインストール

1)以下を実行してインストールする。

ターミナル
brew install groovy

2)バージョン確認

ターミナル
groovy -v#以下のように出力されればOK
Groovy Version: 3.0.3 JVM: 1.8.0_144 Vendor: Oracle Corporation OS: Mac OS X

Nodeインストール

1)以下を実行してnodebrewをインストールする。

ターミナル
brew install nodebrew

2)バージョン確認

ターミナル
nodebrew -v#以下のように出力されればOK
nodebrew 1.0.1
:

3)以下を実行してnodebrewをインストールする。(v8.11.1を指定した場合の例)

ターミナル
mkdir-p ~/.nodebrew/src
nodebrew install-binary v8.11.1

4)使用バージョンの有効化

ターミナル
nodebrew use  v8.11.1

5)バージョン確認

ターミナル
nodebrew list
#以下のように出力されればOK
v8.11.1

current: v8.11.1

6)パスを通す

ターミナル
echo'export PATH=$PATH:~/.nodebrew/current/bin'>> ~/.bashrc
source ~/.bashrc

7)Nodeバージョン確認

ターミナル
node -v#以下のように出力されればOK
v8.11.1

8)npmバージョン確認

ターミナル
npm -v#以下のように出力されればOK
5.6.0

2. Git

1)以下を実行してインストールする。

ターミナル
brew install git

2)パスを通す。

ターミナル
echo'export PATH="/usr/local/bin:$PATH"'>> ~/.bash_profile
source ~/.bash_profile

3)バージョン確認

ターミナル
git --version#以下のように出力されればOK
git version 2.26.2

3. VSCodeインストール

本体はググってダウンロードする。

拡張機能のインストール

1)VSCodeを起動
2)コマンドパレットを開く(cmd+shift+p)
3)"Shell Command: Install 'code' command in PATH"を選択
4)ターミナルを開き、下記を実行

ターミナル
code --install-extension MS-CEINTL.vscode-language-pack-ja
code --install-extension VisualStudioExptTeam.vscodeintellicode
code --install-extension leizongmin.node-module-intellisense
code --install-extension vscjava.vscode-java-debug
code --install-extension vscjava.vscode-java-dependency
code --install-extension vscjava.vscode-java-pack
code --install-extension vscjava.vscode-java-test
code --install-extension vscjava.vscode-maven
code --install-extension vscjava.vscode-spring-boot-dashboard
code --install-extension vscode-icons-team.vscode-icons
code --install-extension shardulm94.trailing-spaces
code --install-extension ionutvmi.path-autocomplete
code --install-extension redhat.vscode-yaml
code --install-extension eamodio.gitlens
code --install-extension donjayamanne.githistory
code --install-extension CoenraadS.bracket-pair-colorizer-2
code --install-extension GitHub.vscode-pull-request-github
code --install-extension IBM.output-colorizer
code --install-extension emilast.LogFileHighlighter
code --install-extension stevencl.addDocComments

※詳細はMarketplace参照。下記URLのitemNameに--install-extension 以降を指定するとそれぞれ見ることができる。
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

インストールした拡張機能一覧を出力するコマンド
code --list-extensions | xargs -L 1 echo code --install-extension

5)以下、メニューから「Code > 基本設定 > 設定」で設定ファイルを開き、お好みでチェックして有効にする。(「設定の検索」にプロパティ名を入力するとフィルタリングされる。)
・insertFinalNewline
 ->ファイル保存時に最新の行を末尾に挿入
・editor.renderControlCharacters
 ->制御文字の表示
・terminal.integrated.copyOnSelection
 ->ターミナルで選択したテキストを自動コピーする
・editor.wordWrap
 ->折り返し表示。”on”にすることで折り返し有効。
・workbench.startupEditor
 ->起動時に無題ファイルを開く。"newUntitledFile"で無題ファイル、"none"で指定なしにも設定可能。


Viewing all articles
Browse latest Browse all 8920

Trending Articles