Script APIでマインクラフト統合版のアドオンを作る際の公式推奨エディターはVisual Studio Code(以下VSCode)ですが、そのまま使うよりも拡張機能を入れた方が格段に開発が楽になります。 この記事ではScript APIでマイクラのアドオンを開発する上で導入しておきたいVSCodeの拡張機能を紹介します。
はじめに Microsoftの提供するVisual Studio Code(VSCode)は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させ、利用の領域を拡げられることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確認していま
はじめに こんにちは、kenです。 GWに「暇だな~~、こんな日はVS Codeの公式ドキュメントを読むか!w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。(!?) 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 これから紹介する機能は言語によって使えたり、使えなかったりします。 今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、そ
GitHub Codespacesをちょっと試した。 初期導入時にハマりどころも多いけど、真面目に設定しておけば、普通にCodespacesの環境だけで開発することは十分できそうだなと感じた。リポジトリ単位で環境を用意するのが基本で、多くのリポジトリに対して毎日のようにレビューをしたりPull Requestを出したり、みたいな開発フローには綺麗にはまらないと思うけど、普通に仕事で単一のリポジトリに対してだけ作業する用途であれば上手くはまると思う。Zoomで会議しながら重い処理を実行していても影響が無いのは良かった。Zoomで会議しながら重い処理を回すべきではないという意見もある。 Codespacesの利用の流れ Codepsacesを利用するときの流れについて。まず、予め .devcontainer/devcontainer.json を配置したリポジトリを用意しておく。Codespa
開発にVS Codeとターミナルを使っています。 以前は、VS Code内蔵のターミナルとは別にWindows Terminalなどを立ち上げて、ターミナルでの作業はVS Codeの外でやっていました。 しかし、最近Windows Terminalを立ち上げる機会が減ってきたので、そのための設定やコマンドについて書きます。 ざっくり以下のような設定をしています。 { { // ターミナルパネルをトグル(oem_3は@を意味する) "key": "ctrl+oem_3", "command": "workbench.action.terminal.toggleTerminal" }, { // 新しいターミナルを作成する "key": "ctrl+shift+oem_3", "command": "workbench.action.terminal.new" }, { // ターミナルパネル
[速報]GitHub Codespacesが全ユーザーに無料提供へ、毎月60時間分。JetBrainsとJupyterLabもIDEとして選択可能に GitHubは年次イベント「GitHub Universe 2022」の基調講演で、これまで有料プランのGitHub TeamとGitHub Enterpriseのユーザーに対して提供していた「GitHub Codespaces」を、無料プランの個人ユーザーにも毎月60時間まで無料で提供することを発表しました。 We’re here to help you push what’s possible: Starting today, we’re rolling out GitHub Codespaces for all, with access to 60 hours of GitHub Codespaces free(!) every mon
どーも、入田 / ぐるたか @guru_taka です! 本記事では Next.js (TypeScript) を環境構築し、ESLint(読み方:イーエスリント)と Prettier(読み方:プリティア)を導入する方法を紹介します。Next.js のバージョン 11 に対応しており、デフォルトで搭載されている ESLint の設定ファイルをベースとしています。 ESLint と Prettier を駆使することで、コードが綺麗になるため、導入することを強くオススメしたいです。本記事では、VS Code 上で、ESLint で構文解析しながら、ファイル保存時に ESLint + Prettier によるコード整形する方法をハンズオン形式でまとめています。
使い道 この記事は順番に実行したいタスクがあるときに役立ちます。 例えば、以下のような場面です。 開発環境にSFTPで接続してWordpressの子テーマを開発 区切りがいいところでZip化して「Zip削除→Zip圧縮→本番Wordpressにアップロード」のループが面倒 npm run build して、firebase deployする2段コマンドが面倒 AWS Lambda function にソースをアップロードしたい serverless frameworkを使えばserverless deployで終わりだが、使うほどのコード量でもない zip圧縮が面倒だが、連番圧縮しても容量の無駄なので、過去バージョンは自動で消したい やること tasks.jsonの基本 tasks.jsonで順次実行 7zと連携してみる npmとか連携してみる tasks.jsonの基本 初めての人はメニ
概要 Docker や VSCode の Remote-Container でファイルシステムをマウントする際にパーミッションの問題に出会ったことはありませんか?Docker はパーミッションの扱いに面倒くささがあり、VSCode + Remote-Container はそれを黒魔術(=力技)で解決しているのでよく分からずに使っていると想定しない結果になることがあります。 そこで Docker や VSCode + Remote-Container におけるパーミッションの扱いと対応方法をまとめてみます。 Docker とパーミッション まずは Docker がファイルシステムのマウント時にパーミッションをどう扱うかを解説します。 結論として Docker がホスト側のディレクトリをコンテナ内にマウントする際のスタンスは 「何もしない」 です。 しかしそれだけでは説明になっていないので、と
VSCode May 2022 (version 1.68)にDevelopment Container Specification関連の発表があった。 その中に、Dev Container in CIという項目があり、それについて調べてみた。 Dev Container in CI GitHub ActionとAzure DevOpsでdevcontainer.jsonで定義されたDevelopment Containerを使えるようになったようだ。 Development Containerについては、以下の記事を参照のこと。 以降、本記事ではGitHub ActionでのDevelopment Containerの利用について記載する。 GitHub ActionでDevelopment Container使用に関するドキュメントは以下で確認できる。 上記を見ると、devcontai
Visual Studio Code(VsCode)本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン(コーダー・マークアップ・フロントエンドエンジニア視点) 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
先日アップデートされた、VS Code v1.71で「スティッキー スクロール」がさらに便利になったので紹介します。 「スティッキー スクロール」はv1.70で実験的な機能として実装されましたが、v1.71で正式に実装され、さらに追従行数を設定できるようになり、スティッキースクロールで関数やクラスをリスト化して移動もできるようになりました。
React Inspector というChrome拡張機能を作りました。 Chrome上でインスペクタを起動し、クリックしたReactコンポーネントのソースコードをピンポイントでエディターで開きます。(現在はVSCodeのみ対応) 追記: ↑2022/09/12 オプションページから "Open in Editor URL" を設定できるようにし任意のエディターのURLスキーマで開くことができるようになりました...! Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh GitHub: https://github.com/hand-dot/react-inspector Reactのソースコードに直接ジャンプできるのでUIか
こんにちは、devcontainer職人です🧑🍳 今回紹介するのはDocker Composeを既に利用している開発環境にかんたんにdevcontainerを構築する方法を紹介します。 VSCodeのdevcontainerはとても良くできた開発環境構築方法なのですが、ちょっと難しそうと思われていたり、VSCode以外のエディタを使う人の開発体験が悪くなるのでは、などの懸念がありまだあまり使われていないような印象があります。今回はそんなdevcontainerを3分で作れるtipsを紹介します。 準備するもの Docker Composeで構築した開発環境 VS Code Docker Desktop for Windows/Mac Remote - Containers extension Docker Composeで構築した開発環境のサンプル 今回用意するのはサンプルとしてRu
以下、それぞれのリクエストについて、少しずつ補足します。(各種機能の具体例としてスクリーンショットをいくつか挙げますが、このlanguage server protocolを実装したものには限定しません。) コーディング支援 自動補完は、典型的には . (dot)などをタイプした時に、その左辺オブジェクトのメンバーの一覧を表示する機能です。textDocument/completionが補完候補を表示するために送信するリクエスト、completionItem/resolveが補完候補を(カーソルキーなどでリストなどから)選択している時に送信するリクエストです。 テキストエディタは、ユーザー入力の1文字1文字について、completionリクエストを送信したりすることはありません(completionの処理はそれほど軽いものではなく、必要が無い場面で呼ぶべきものではありません)。comple
こんにちは皆さん。 いやね、皆さんこう言いますよ。 「それもう何番煎じやねん!前も聞いたわ!」 ってね。 でも、こうも思うじゃないですか。 「たくさん記事があるってことは、ひょっとしてめっちゃくちゃ大事なことなのでは?」 とね。 とういうわけで、毎回まるで前提のごとく使っていたVS Code Remote Containerによるコンテナ開発について、自分が使っているやり方について簡潔に書いてみます。 マニュアルなぞっても面白くないですしね。 VS Code Remote VSCではリモート環境に入ってエディタを起動することができます。 イメージ的にはこんな感じで、リモート環境上で立ち上げたエディタを、外部から遠隔操作するようなイメージですね。 VS Code Remote自体は随分前からあったのですが、WindowsのDocker開発の環境が整うまでに結構かかったのですよね。 私のプライ
Next.jsプロジェクト作成 作業端末のターミナルアプリを開き、任意の場所に作業ディレクトリを作成します。 作業ディレクトリをバインドマウントしたNode.jsコンテナを実行して、npx create-next-appでNext.jsプロジェクトを作業ディレクトリに作成します。 このコンテナは--rmオプションを付けて実行しているので、終了と同時に削除されます。 % mkdir sample-app % docker run --rm -it \ -v ${PWD}/sample-app:/app:delegated \ -w /app \ node:16-bullseye-slim \ sh -c "npm install -g npm@latest && npx create-next-app@latest . --ts" (略) Need to install the follow
TL;DR Awesome Emacs Keymap拡張を入れて emacs-mcx.useMetaPrefixEscape をONにする emacs-mcx.useMetaPrefixCtrlLeftBracket をONにする Awesome Emacs keymap 拡張について コーディングに使うエディタをEmacsからVisual Studio Codeに乗り換えてもうすぐ3年になります。乗り換えた後もどんどん機能が追加され、今の所自分にとって理想のエディタです。(特にRemote Development拡張はとてもインパクトのあった機能で、これ以降で開発スタイルがガラリと変わりました) しかし、長年Emacsを使って体に染み付いたキーバインドはいかんともしがたく、キーバインドをEmacs風にする拡張機能は手放せませんでした。 キーバインドをEmacs風にする拡張は多数あるのです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く