Next.jsのローカル開発環境をDocker + VS Code + Remote Containersで構築 | 電算星組
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
VSCodeのAwesome Emacs Keymap拡張でESCとCtrl+[がMetaキーとして使えるようになった - Qiita
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風にする拡張は多数あるのです
VSCode Remote ContainersでGitにSSH接続でpushする
VSCode Remote Containers拡張機能を使うとdockerのコンテナに接続できます。 開発環境として使用する場合、GitにSSH接続する必要があります。 しかし、コンテナ内に開発者依存のSSHの秘密鍵を置くわけにはいきませんし、セキュリティ上危険なので.sshディレクトリをマウントしたりしてはいけません。 Remote Containers拡張機能に、コンテナ接続元の端末のSSHキー情報を転送する機能が備わっているので設定しましょう。 まずはdockerコンテナにGitをインストール コンテナ内でgitコマンドを叩いてみて、git入ってないよ！って言われる場合は、まずはgitをインストールしましょう。 開発時に使用するだけなので、devcontainer.jsonにインストールコマンドを記述して、Remote Containerを使ってコンテナを起動したときだけ入るように
devcontainer内部からGitHubへpushするアカウントを公開鍵を利用して切り替える
VS CodeのRemote Container拡張を使って開発するとコンテナー内部からgitを扱うこともできます。その時利用できるGitHubのアカウントを柔軟に設定したくなりました。 やりたいことはこういうことです。 +--------------+ +-----------------+ +--------+ | devcontainer | --> | Host(ssh-agent) | --> | GitHub | +--------------+ +-----------------+ +--------+ hostからのpush devcontainerからのpush それぞれで異なるGitHubのアカウントを利用できるようにしたい。 ssh-agentを使います。 hostのssh-agent に切り替え用アカウントの秘密鍵を登録する devcontainer に登録した公
Gitのコミットグラフをキレイに分かりやすく見るツールは、VSCodeが最高だ！ | DevelopersIO
今のプロジェクトでは、いわゆるGitHubフローでGit運用しています。 masterブランチから作業ブランチを作って作業する 作業ブランチからmasterブランチへのマージは、プルリクエストを使う 隔週リリースを行っており、その際はリリースしたいコミットにタグ付けをしています。 通常であればmasterが対象ですが、たまに「この機能は次のリリースにしよう」などの理由でmaster以外のコミットにタグをつけます。 リリースはmasterブランチにタグをつけて行う 都合悪いときは任意のコミットにタグをつける このとき、リリース対象のコミットを調べるためにコミットログ（グラフ）を確認しますが、とても見やすいGUIツールがあったのでご紹介します。 今まで シンプルなコミットログなら、gitk -allコマンドで見ることが多いです。 しかしながら、そこそこ複雑なコミットログの場合、gitk --a
【図解】VScodeのRemote Container拡張機能とは？わかりやすく
以下のようなことができるVScodeの拡張機能です。 VScodeからDockerを制御できる Dockerの1つのコンテナ内に「VScodeサーバー」なるソフトをインストールして、そのサーバーにローカルのVScodeから接続して、あたかもローカルのVScodeを操作しているような感覚で、Docker内のVScodeを操作できる 😇😇😇？？？ ちょっと自分でも何言ってるのか分からないのですが ムリやり図解すると以下のような感じです、おそらく。。 Remote Containerから「どのコンテナを立ち上げるか？」を指定する Dockerfile、docker-compose.yml、image名を直接指定という3つの方法がある 複数のコンテナを立ち上げる場合は、どのコンテナの中に入るか（VScodeサーバーをインストールして接続するか）も指定する Remote ContainerがD
【連載】WSL2、Visual Studio Code、DockerでグッとよくなるWindows開発環境 〜 その4：Visual Studio Code、Dockerで改善！！ 〜 | SIOS Tech. Lab
こんにちは、サイオステクノロジー武井(Twitter:@noriyukitakei)です。今回は、第4回シリーズで、WSL2、Visual Studio Code、Docker、Windows Terminalなどの最新技術を用いて、Windows開発環境をグッとよくしましょうっていうお話をします。第4回目の今回は、Visual Studio CodeとDockerで開発環境の改善を実践してみます！！ その1：まずは概要 その2：WSL1＆2のしくみ その3：WSL2、Windows Terminalで改善！！ 今回はこちら → その4：Visual Studio Code、Dockerで改善！！ ※ 本記事は技術評論社出版の「WEB+DB PRESS」Vol.117(詳細はこちら)に私が寄稿した「WSL 2、Docker、Visual Studio Code［最新］Windows開発環境
Next.jsをVS Codeで快適に書くスニペット
モチベーション 新しいコンポーネントを作る時にいつも書くことを、スニペットにして楽をしたい。 VS Codeにはスニペットを登録できる えらべる設定方法 ２種類ある。 コマンドパレットからVS Code全体に設定すること。(参考) .vscodeディレクトリに*.code-snippetsにマッチするファイル名をおくことで、プロジェクト単位で利用すること。(参考) プロジェクト単位で設定する場合はscopeプロパティを使って利用する言語を指定できる。 こちらの記事で詳しく解説されてる。 すごい多機能 いろいろできる。書くのがめんどくさい書ききれないので詳しくはドキュメントへ。 例として ファイル名・ディレクトリ名などを埋め込める(正規表現も使える) デフォルト値を選択などもできる スニペットを貼った後のカーソル位置を指定できる。 など。 自分の書いたスニペット ファイル名と同じ名前のFun
VS Code の使い始めに入れておくと便利な拡張機能 10 選
はじめに この記事では、IT エンジニアである/ないに関係なく、Visual Studio Code (以下、VS Code) をこれから初めて使い始める人が、最初に入れておくと後々便利になるだろうと思われる拡張機能を紹介しています。 拡張機能 (Extension) とは、サードパーティー製の追加機能のようなものであり、誰でも自由に開発・公開することができるようになっているものです。VS Code は無償で提供されているテキストエディタですが、それだけでは不便というユーザーの悩みを解消してくれるものです。 (という立ち位置で存在していた当初でしたが、最近は標準機能のみでも最早テキストエディタという範疇を超えている気がしなくもないです) まだ拡張機能を使い始められていない/使いこなせていないという方は、是非この記事を参考に、VS Code の拡張機能を使い始めるきっかけにしてもらえれば幸い
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
マイクロソフト、WebIDEの「Visual Studio Codespaecs」を「GitHub Codespaces」に統合へ
マイクロソフト、WebIDEの「Visual Studio Codespaecs」を「GitHub Codespaces」に統合へ マイクロソフトはWebブラウザで利用可能な統合開発環境、いわゆるWebIDEの「Visual Studio Codespaces」を、GitHubで提供を予定しているWebIDEの「GitHub Codespace」へ統合することを発表しました。 Visual Studio Codespacesは、2019年5月に行われたMicrosoft Build 2019でVisual Studioファミリーのなかで、Web版のVisual Studioの位置づけとなる「Visual Studio Online」として発表され、その1年後の今年2020年5月に「Visual Studio Codespaces」と名称変更され、パブリックプレビューとして利用可能になりまし
VSCodeの拡張機能、なに使ってますか？ はてなエンジニア世論調査 #2 - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:hogashiです。 半年ほど前に公開した「開発環境のフォントなに使ってますか？」に続く、はてなエンジニア世論調査の第2回「VSCodeの拡張機能、なに使ってますか？」です。 ソースコードエディタであるVisual Studio Code（以下、VSCode）は多くのエンジニアに利用されています。VSCodeにはソースコードのシンタックスハイライトやデバッグなど、さまざまな拡張機能をインストールして使うことができますが、公開されている拡張機能は膨大にあります。 その中から、はてなのエンジニアはどんな拡張機能をインストールして、日頃の開発に使っているのでしょうか？ 前回と同様にアンケート調査してみました。 アンケート方法 アンケート結果から見える人気の機能拡張 6割の拡張機能は1人だけが使用 人によってかなり異なるインストール数 興味深いコ
自分流 Next.js + TypeScript + ESLint + Prettier + VSCode (+Dockerfile) 初期設定 - Qiita
最近Next.jsを書くようになって、自分なりのコーディングスタイルが固まってきたので今後パパっとセットアップができるようにメモっておきます。 この記事では以下のことができるようになります。 Next.jsをTypeScript / TSX で書く ESLintとPrettierとVSCodeを組み合わせ、保存時自動フォーマット importを相対パスではなく絶対パスで書く ServerをExpressで動かす 開発時は.envで、本番は環境変数によるアプリケーション設定値を扱う 【発展編】Kubernetesを見据えてDockerで動かす Next.jsをTypeScript / TSX で書く ※執筆時Next.js version: 9.1.1 create-next-app コマンドで雛形を作ってもいいのですが、余計なものもくっついてくるのでスクラッチでインストールします。
console.logなしでNext.jsをVSCodeでデバッグさせる方法
VSCode で Next.js のデバッグをできるようにしたら開発のデバッグが超絶楽になったのでその方法について紹介していきたいと思います。 ※補足 Next.js vscode debugとかで Google 検索してみると以下のページに引っかかるかと思いますが、Next.js 9 の環境だと動かないので以下のリンクを参考に修正して動作できるようにしました。 https://github.com/microsoft/vscode-recipes/tree/master/Next-js 最終形のコードコードだけ知りたいという方は.vscode/launch.jsonを作成し、以下のコードをコピペで大丈夫です。 例は src 配下のディレクトリ構成の場合ですが、root 直下に pages がある場合は src を削除してもらえれば動作すると思います。 { "version": "0.2.
Configuring: Debugging | Next.js
Debugging This documentation explains how you can debug your Next.js frontend and backend code with full source maps support using the VS Code debugger, Chrome DevTools, or Firefox DevTools. Any debugger that can attach to Node.js can also be used to debug a Next.js application. You can find more details in the Node.js Debugging Guide. Debugging with VS Code Create a file named .vscode/launch.json
VSCode に必ず入れておきたい拡張機能 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 VSCode 関連記事 VSCode の初期設定 拡張機能の探し方 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popul
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Visual Studio Code＋Markdownでキレイなプレゼンスライドを手軽に作成できる「Marp」／Markdownに慣れているのならばちょっとした拡張記法を覚えるだけ【レビュー】
The React Bootcamp
VSCode + ESLint + Prettier + React + TypeScript （自分用メモ Fall, 2020） - Qiita
vscode-recipes/Next-js at master · microsoft/vscode-recipes