# AizuHack # ~ VisualStudioCode勉強会 ~ --- ## VisualStudioCode って？ - MicroSoft社が作ってるエディタだよ〜 - VSCodeって呼ばれることが多いよ〜 - いろんな拡張機能があるよ〜  --- ## VisualStudioCode を入れてみよう - https://code.visualstudio.com/download からダウンロードできる！ - Windows🪟/Linux🐧/Mac🍎 に対応しているよ〜 - リンク先に従って進めてね 🙏🏻 --- ### VisualStudioCode の導入(Windows🪟) - VSCodeUserSetup-ia32-1.67.1.exe がダウンロードされる - それを実行して、指示に沿って進めていく - ダウンロードする場所はどこにするか？ - ホーム画面にショートカットは作るか？ - などが聞かれるので答えていく ---  ---  ---  ---  ---  ---  ---  --- ### VisualStudioCode の導入(Mac🍎) - VSCode-darwin-universal.zip がダウンロードされる - それを解凍して、「Visual Studio Code」というアプリケーションを実行する 以下のような画面が出たら、「開く」を押す  開けたらOK 👍 --- ### ターミナルから実行できるようにする(Mac🍎) - `code` とターミナルで打つと実行できるようにする - Command + Shift + p でコマンドパレットを開く - `shell` と打つと以下の画面が出てくるので、インストールする方を選択する  --- ### 日本語環境にする (Windows🪟/Linux🐧/Mac🍎) - 左端のメニューから(Extensions)を選択する - 検索欄に`japan`と入力する - 「Japanese Language Pack for Visual Studio Code」をインストールする  --- ## インストール完了 🎉🎉 - 自由に開発しよう！！ --- ## 基本的な操作 1. 「フォルダーを開く」から好きなフォルダーを開く 2. そこでファイルを作成したり、作業したりする コードの検索機能だったり、ファイルの自動保存機能だったりがあるよ〜 :::info ショートカットキーを覚えると、作業がよりスムーズになるよ！ ::: --- ## おすすめの拡張機能🎁 - Bracket Pair Colorizer :arrow_left: 括弧`()`に対応した色がつく！ - vscode-icons :arrow_left: 左側のファイル欄にアイコンがつく！ - Settings Sync :arrow_left: どのパソコンでも設定を同期してくれる！ - Partial Diff :arrow_left: 指定した範囲の差分(diff)が簡単に取れる！ - Trailing Spaces :arrow_left: 末尾の空白を教えてくれる！ - Zenkaku :arrow_left: 全角の空白を教えてくれる！ <!-- CSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS --> <style> /*slide preview*/ /*base*/ .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal section, .reveal table, .reveal th, .reveal td, .reveal li, .reveal blockquote, .reveal p { text-align: left; letter-spacing: normal; text-shadow: none; word-wrap: break-word; } .reveal > .slides > section > div > :nth-child(1) { margin-top: 100px; } .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { position: relative; line-height: 1.4; font-size: 36px; text-transform: none; } .reveal h1 { font-size: 60px; font-weight: bold; } .reveal h2 { border-left: solid 12px #4285f4; border-bottom: solid 8px #4285f4; padding: 0 0 0 20px; } .reveal h3 { border-bottom: dotted 4px #4285f4; padding: 0 0 0 20px; } .reveal p, .reveal li, .reveal td, .reveal th { font-size: 20px; } /*codeblock*/ .reveal td.hljs-ln-numbers { width: 40px; text-align: right; padding: 0 12px; border-right-color: #888; border-right-width: 2px; border-right-style: solid; } .reveal td.hljs-ln-code { padding-left: 12px; } /*inline code*/ .reveal p code, .reveal li code, .reveal td code { color: #666; background-color: #e8e8e8; padding: 0 8px; border-radius: 4px; } /*list*/ .reveal ul { padding-left: 4px; } /*alert*/ .reveal .alert p::before { color: inherit; font-weight: bold; padding: 0 8px 0 8px; } .reveal .alert.alert-info p { background-color: #D9ECF7; color: #31708F; } .reveal .alert.alert-danger p::before { content: '🚫'; } .reveal .alert.alert-info p::before { content: '💡'; } .reveal .alert.alert-success p::before { content: '✅'; } .reveal .alert.alert-warning p::before { content: '⚠️' } /*page preview*/ .markdown-body hr { display: none; } .markdown-body h1 { text-align: center; font-size: 40px; border-bottom: none; padding: 0; } .markdown-body h2 { line-height: 72px; border-left: solid 12px #4299f4; border-bottom: solid 8px #4285f4; padding: 0 0 0 20px; } .markdown-body h3::before { content: '●'; color: #p; padding: 0 8px 0 8px; } .markdown-body h4::before { content: '>'; padding: 0 8px 0 12px; } .markdown-body code .wrapper .gutter.linenumber { border-right: solid 2.5px #999 !important; } .markdown-body .alert p::before { color: inherit; font-weight: bold; padding: 0 8px 0 0; } .markdown-body .alert.alert-danger p::before { content: '🚫'; } .markdown-body .alert.alert-info p::before { content: '💡'; } .markdown-body .alert.alert-success p::before { content: '✅'; } .markdown-body .alert.alert-warning p::before { content: '⚠️' } </style>