はじめに こんな人が役に立つ記事 コーディング業務の効率を上げたい。 コーディングに関するチートシートを知りたい。 打つのもめんどいからコピペでなんとかしたい（笑） 今回は、コーディングに役立つチートシートをまとめました。 VSCODEチートシート エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！ HTML系のチートシート集 HTMLに関するチートシートをまとめてみました。 HTML5 タグチートシート HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、 PDFでダウンロードできます。 HTML5 入れ子チートシート HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート 特殊文字一覧：HTMLで使え
Visual Studio CodeでWeb制作・開発のコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニックを紹介します。 My Web Development VS Code Settings, theme, Extensions, tips and tricks br lampewebdev(@lampewebdev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私がVSCodeを使用している理由 VSCodeのテーマ・アイコン・フォント VSCodeの機能拡張 VSCodeの設定 VSCodeの便利な使い方 私がVSCodeを使用している理由 私はプログラミングを始めて以来、たくさんのエディタやIDEを使ってきました。Eclipse、Netbeans、Notepade ++、Brackets Ed
Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。 おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。 (※2019.11.14 追記)当記事が「はてなブックマーク」テクノロジーカテゴリーの人気エントリーに掲載されました。ありがとうございます。 昨日投稿した「僕がおすすめするVSCodeのプラグインまとめ」がはてなブックマークのテクノロジーの人気エントリーに掲載されました。ありがとうございました。うれぴまる。#notehttps://t.co/w1pg7J3gfDhttps://t.co/LzHQfdYReZ — TAK (@tak_
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 目次 1.はじめに 2.VSCodeの拡張機能紹介 3.コーディングのポイント 4.よく使われる英単語一覧 5.エラーとの向き合い方 6.テストで動作確認 7.検索の極意 8.公式ドキュメントに慣れる 9.リファクタリングでさらに読みやすく 10.資料作成で気をつけること 11.Gitで管理 12.よく使うLinuxコマンド一覧 13.仕事の進め方 14.プログラム以外で意識するところ 15.初心者こそ読んで欲しい本 16.まとめ 1. はじめに プログラミングは現代のデジタル社会において重要なスキルです。 AIがコードを書いてくれる時代ですが、それでも人の手によるプログラ
プログラミング言語勉強用の環境を Visual Studio Code + Docker で手に入れてみる - かずきのBlog@hatena
Visual Studio Code を入れます。 azure.microsoft.com Visual Studio のリモート開発の拡張機能を入れます。 marketplace.visualstudio.com そして docker を入れます。 www.docker.com Windows の人は入れたら設定からドライブ共有をオンにしておきましょう。 Python 3 の環境が欲しい 適当なフォルダーを Visual Studio Code で開きます。 F1 や Ctrl + Shift + P あたりでコマンドパレットを出して Remote Add あたりで検索すると Remote Containers: Add Development Container Configuration Files... という項目が出てきます。 どんな開発環境が欲しいのかリストが出てくるので Py
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場 WindowsやMacなどのデスクトップPCでVisual Studio Code（以下VSCode）を利用して開発をする場合、同じローカルマシン上でDockerコンテナのLinux環境を起動し、VSCodeのターミナルで接続して操作することは、開発環境としてよくあることだと思います。 これと同じことをWebブラウザ版のVSCodeでも実現する、すなわちWeb版VSCodeが同一Webブラウザ上にWebAssembly化したDockerコンテナを起動し、Web版VSCodeからローカルマシンとして接続し利用できる、実験的実装を実現したVSCodeの拡張機能「vscode-container-wasm」が登場しました。 V
Macaron | Visual component editor for Web development
Macaron is an open-source UI design tool to create and maintain Web Components.
追記 versionによっては設定を変えないとエクスポートができないようです。 エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。 現状バージョン0.4ではこちらの設定が必要となります。 VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 2020/10/18追記 現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。 その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。 はじめに VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、 導入方法と使い方を備忘として残していきます。
REST API のテストに Postman 使ってたけど Visual Studio Code の REST Client に乗り換えた - かずきのBlog@hatena
くっ、名前だけ知ってたけどこんなの便利だとは…！！ marketplace.visualstudio.com Azure API Management の Visual Studio Code 拡張機能で API のテスト呼び出しに REST Client が使われてるので使い始めてみたのですが「あっ、ハイ。便利っすね…」という感想しか出てこないくらい便利でした。 普通に HTTP のリクエストをテキストで用意しておくと Send Request 押すだけでレスポンスを出してくれる…。 先人の方々が沢山紹介してくれてる記事があるので詳しい使い方とか推しのポイントはそちらを見るとわかりやすいと思います！ qiita.com 私の推しポイント 上記記事にも書いてありますが、1ファイルで複数のリクエストを書いておいて、個別に実行できるので特定の API をテストで叩くためのファイルを 1 つ用意
ChatGPTとは？ OpenAIが開発するGPT-3という言語モデルをベースとした(執筆当時)チャットアプリです。 こちらの質問に対して、AIが色々な質問に答えてくれて、一般的な内容だけではなく、コードレビューやバグなども発見してくれるめっちゃ凄いやつです。 細かい内容は以下の記事がとても参考となります。 筆者の関連記事 VSCodeと連携して、ブラウザを開かなくてもChatGPTを使用できるようにする 通常はブラウザを開いて使用するのですが、コーディング中にサクッとレビューしてもらったり、バグを見つけてもらえるような拡張機能があったので、そちらの設定方法について記述してみます。 今回インストールする拡張機能 使用までの手順 環境 PC: MacBook Pro (Apple M2) OS: macOS Ventura 13.1 VSCode: v1.74.3 OpenAIの価格について
ファイル比較 VSCodeのエクスプローラで、ファイル２つを選択して右クリックメニューから「選択項目を比較」で比較することができます。 また右クリックで、「比較対象の選択」をした後に「選択項目を比較」でも比較することも可能です。 VSCodeのSnippetの使い方 VSCodeのSnippetも便利です。似たような構造のクラスを実装する場合などや、プロジェクト共通で使いがちな書き方というものをSnippetに登録して、効率化することができます。 また、変数を持たせておくこともできます。この場合、Snippetを呼び出した後に変数部分にカーソルがあたるので、そこで変数部分をタイピングできます。 詳細は以下のリンクをご覧ください。 Visual Studio Codeに定型文（スニペット）を登録する方法 VSCodeのUser Snippetを活用しよう！ また後述するSnippet Gen
はじめに VScodeを愛用していくうちに設定ファイル（settings.json）がだいぶ煩雑になってきたので、それらを見直しがてらZennに記事としてまとめてみました。 主にwebサイト制作者向けの内容になっております。 どなたかの参考になれば幸いです！ settings.jsonのコードの中身だけを見たい方はこちらへどうぞ！
はじめに 今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。 拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 WordPress関連 フロント向け JavaScript React Vue サーバーサイド向け PHP Ruby その他 拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。 この記事の対象者 プログラミング初心者の人 分野別におすすめの拡張機能を知りたい人 開発の生産性をより上げたい人 VSCodeを使う人全員向け まずはじめにVSCodeで開発をしている人、全員におすすめをしたい拡張機能を紹介しておきます。 自分自身が使った拡張機能の中で「とりあえず入れて損はない」というものを厳選しています。 それでは紹介していきます。 Japanese La
VisualStudioCodeは大人気なだけあって、有能なエクステンションが次から次へと出てきますね。 色々とっかえひっかえ試して遊んでいる人も多いのではないでしょうか。 なんかMinecraftのMOD環境構築と同じ空気を感じますね。 (環境ができたところで飽きて遊ばなくなる) まあ一番手っ取り早いのは、既に評価の固まっている手堅いエクステンションを導入することです。 ということで以下はSahil Bondre( Twitter / GitHub / LinkedIn / Instagram / 個人HP )による記事、💡 10 VS Code extensions I can't code withoutの日本語訳です。 💡 10 VS Code extensions I can't code without VSCodeは私のお気に入りのエディタです。 存在するコードエディタの
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに VSCodeは世界で多くの人が使っているコードエディタです。 開発の際に使用している人も多いのではないでしょうか。 今回はそんなVSCodeの拡張機能を一挙に紹介していきます。 拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストールのやり方を説明します。 アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです） インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをク
各機能とツールについて、説明していきます。 エディタ Visual Studio Code エディタやIDE(統合開発環境)は好きに選んでいただければ良いとは思いますが、特に希望がないならば、Visual Studio Codeを選んでおけば間違いないでしょう。 Pythonを含む幅広い言語に対応し、豊富な拡張機能を備えている非常にリッチなエディタです。とりわけPythonプロジェクトについては、これさえ有れば、特にIDEなどは必要ないと思います。 インストールは↓から。 バージョン管理ソフト Python3系は日夜アップデートされていて、2022年12月現在の最新verは、3.11.1が提供されています。 とはいえ、プロジェクトによっては、3.7.1までしか動作が担保されていないもの、3.9.0で現在開発中のもの...などがあります。最新のPythonが常に必要、というわけでは決してなく
IDEにChatGPTを統合、「この関数のテストコードはどこ？」「XXXを実装するならどう書けばいい？」など、AIでコードと対話できる「qqbot」登場
IDEにChatGPTを統合、「この関数のテストコードはどこ？」「XXXを実装するならどう書けばいい？」など、AIでコードと対話できる「qqbot」登場 テキストから高度なイラストを生成するAIや、人間と自然な対話を可能にするAIが最近話題になっています。 この人間と自然な会話をするAIチャットの代表的なサービスであるChatGPTの派生サービス（Variant of ChatGPT）をVisual Studio CodeなどのIDEに統合し、開発中のコードについて「この関数のテストコードはどこ？」などと対話できる「qqbot」が登場しました。 開発したのはDan Robinson氏。 Introducing qqbot, a variant of ChatGPT that lives in your IDE. The cool thing about qqbot is that it k
【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る - Qiita
【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作るMarkdownVisualStudioCodeDraw.ioMarpvega TL;DR Visual Studio Code上で、Markdownから、こんな感じのデッキを生成できるようにします。 使用したファイル類は、GitHub tomo-makes/marp-styles にまとめました。 きっかけ 叩き台となる資料がなく、急ぎプレゼンをする機会があり、Marpで作成した 内輪では使っていたが、多くの目に触れるのは初めてで、もう少しデザインを調整したいと思った 今後も使いまわせるものを、スニペット、およびサンプルテーマ化しておこうと思い立った ついでにいろいろな図表の生成とデッキへの入れ方、必要そうな配色、素材のリンクをまとめておきたい Marpとは Marp: Markdown
TODO.md Kanban Board - Visual Studio Marketplace
Todo Kanban Board Todo Kanban Board manages tasks and save them as TODO.md - a simple plain text file. Features The syntax is compatible with Github Markdown TODO.md file is portable and can be committed with Pull Requests (PRs) to git repositories. Support custom file name, multiple task lists. Checkboxes are optional (if your task titles don't have them). Task title can also have markdown for st
Mac OS初期設定 開発用ソフトをインストールする前に、まずはMac OSの設定を整えて使いやすいデスクトップ環境を構築します。 初期設定 電源を入れると、色々と初期設定が求められます。基本的には指示に従って進めればOKです デスクトップ設定 まず電源を入れて目につくのが、下のDockが大きくて邪魔だということです。 その他にもスクロールの向きがWindowsと逆だったり、Finder(Windowsでいうエクスプローラ)が使い辛かったりするので、 以下のYouTubeチャンネルを参考にして設定し直すと、使いやすくなるかと思います。 OSアップデート 購入直後のOSはバージョンが古くなっていてセキュリティ的に脆弱なことがあるので、アップデートします。 基本的には初回起動時に自動でアップデート画面が出てきますが、以下の方法で手動アップデートも可能です ・Dockから「システム環境設定」を開
神アップデート！ Win, Mac, Linux対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode
HTML, CSS, JavaScriptをはじめとしたさまざまな言語に対応、クラウドでの同期機能も備えたオープンソースのコードスニペットマネージャー「massCode」がv3に神アップデートされたので、改めて紹介します。 macOS, Windows, Linux対応、日本語の入力など日本語環境も完全サポート。クラウドで同期できるので、すべての環境で同じコードスニペットを使用できます。 非常に快適で高速に動作し、VS Codeとの連携でさらに便利になっています！ massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 1
はじめに インストールすればすぐに書けて動かせるのが魅力のPythonですが、 実際に業務などでキチンと書こうと思ったら Pythonのバージョン管理ツール パッケージマネージャー エディター(IDE) リンター フォーマッター 型チェッカー くらいは最低限用意する必要があります。 しかしこの界隈、怒涛の勢いで日々新しいものがリリースされていて一概に「これがベストプラクティス」を提示するのが難しいんですよね。そこで今回は上記それぞれのツールについて「こんなものがあるよ」というのをご紹介したいと思います。 TLDR バージョン/パッケージ管理はpyenv + Pipenvがスタンダードだった時代は終わった VS CodeかVimを使うなら型解析にPyrightを導入するとよい テンプレートを用意しました 1. バージョン/パッケージマネージャー プロジェクトごとに異なるPythonのバージョ
Visual Studio Codeでコードを書く時に知っていると便利なショートカットを紹介します。コードを書く時に自分がよく実行する操作のショートカットを覚えておくと、作業効率は格段にアップします。 21 VSCode Shortcuts to Make Coding Faster and More Fun by jsmanifest 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに VSCodeで利用できるショートカットのいくつかを見逃しているかもしれません。すべての人がすべてのショートカットを調べて、より速くコードを作成し、より多くの人に役立つショートカットを見つける時間があるわけではありません。 この記事では、より高速なプログラマーになるためのお気に入りのショートカットをリストアップしました。これらのショートカッ
リモートワークの設計と運用 / または Discord + VSCode LiveShare がいいぞという話 - mizchi's blog
この記事読んで自分のリモートワーク経験からどうやるのが今一番良いだろうか、という話をずっと考えていたので、書き出してみました。 リモートワークをする人必読。組織パフォーマンスを左右する「デジタル心理的安全」とは？ | 未来を変えるプロジェクト by iX（アイエックス） 自分自身はフルタイムリモートとフリーランスでのリモートの2つの経験があります。 次の会社が申請すればリモート可というスタイルなのですが、自分がリモートワークする場合、働く環境に期待しているのはこういうことだ、というのを事前に宣言しておく目的もあります。 フルリモートではなく、部分的なリモートを想定しています。 リモートワークに期待すること リモートワークは、基本的には「うまく運用すれば効率が下がらない」というものです。リモートワークで効率が上がることもありますが、基本的にはある種の福利厚生、雇用競争力のためと割り切ったほう
上記のようにコードエディタを開くコマンドを分けるために、既にcodeコマンドをVScodeで使っている方はcursorダウンロードの際にcursorコマンドのみインストールするようにしてください。codeの方もインストールすると、codeコマンドでVScodeとCursorどちらも開いてしまうようです。 Cursor主要機能紹介 cmd + Shift + L or cmd + L でGPTとChat機能 エディタ上で画面右にGPTに質問できるサイドバーが出現する。何も選択してないと無から質問できる状態になっていて、コードを選択した状態で開くとそのコードがあらかじめ引用された状態になっている(別の部分のコードもどんどん追加できる)。 ↑10~21行目をcmd + Lした後に31~33行目を追加でcmd + Lした画像 cmd + K でAI Edit機能 コードを選択した状態でcmd +
Google、VSCodeの代替を狙う「Eclipse Theia」コードエディタをクラウド統合開発環境として採用。Google Cloud Shellに統合を発表
Google、VSCodeの代替を狙う「Eclipse Theia」コードエディタをクラウド統合開発環境として採用。Google Cloud Shellに統合を発表 Googleは、Google Cloudをコマンドラインで操作できる「Cloud Shell」の機能の新機能として、プログラミングのためのコードエディタ「Cloud Shell Editor」を統合すると発表しました。 Cloud Shell EditorはWebブラウザ上で動作するコードエディタです。Go、Java、.NET、Python、Node.jsなどのプログラミングに対応。 すでにプレビュー版として利用可能。下記は実際に起動した画面です。 見てわかる通り、まるでVisual Studio Codeの画面そっくりです。 これはCloud Shell Editorに採用されたコードエディタ「Eclipse Theia」が
はじめに Web開発といえばUNIXターミナルが使えるMacが便利だったが、ついに今年WSL2が正式リリースされた。これでようやくWindowsでまともなWeb開発環境を構築することが可能になって喜びもひとしお。 それどころか、WSL2, Windows Terminal, VS Codeと便利なツールがどんどんリリースされていてMacよりも便利といえる環境になってきたため、本格的にWindowsに乗り換えることにした。 環境構築をメモしていく。 WSL2とUbuntuのインストール 公式ドキュメント通り。 ディストリはUbuntuを選んだ。 Windows Terminal マイクロソフト純正。とても使いやすく、アップデートも精力的で今後も楽しみ。 Microsoft StoreからWindows Terminalをインストール 設定ファイルがJSONなのはエモいですね。 この辺で好きな
昨日の自分「今作ってる曲まじで良すぎる。天才かもしれん」 今日の自分「ﾅﾆｺﾚ。曲作り下手すぎか～～」 この記事は新歓ブログリレー23日目の記事です。 こんにちは、カシワデと言います。サウンド班に所属していてパソコンで音楽を作っています。 皆さん、DTMってしってますか？ DTMとはDeskTop Musicという和製英語の略で、パソコンで音楽を作ることを広く指します。パソコンで音楽を作ると言っても昨今の曲は大体パソコンを用いて作られているので、DTMというと特に"打ち込み"のニュアンスが出るような気がします。 でも、『パソコンで音楽を作る～』とか『打ち込み』っ… 🎉入学おめでとう🎉まずは新入生の皆さん、ご入学おめでとうございます！！！これから始まる大学生活は非常に短いですし、世間で言われる程時間に余裕があるわけでは無いので、後悔の無い充実した生活を送ってください！
開発環境へのこだわり
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
はじめに 前回のChatGPTで電卓アプリを作れるか試した件について、Twitter等からも反応を見ることができて嬉しかったです。 おまけの評判が良かったので、私がここ最近で気に入ってるChatGPT関連の情報をまとめさせていただきます。 ※私も前回おまけをまとめていて、本編よりもこっちを見てほしい！！と途中から思っていたので、評判が良くて嬉しかったですｗ ChatGPT 感情回路を埋め込み 大学の授業レポート代行 AlexaでChatGPTとやり取り ロボット制御に応用 Pythonコードを、JavaScriptに書き換え p5.jsで冬の情景を描画 デバイスの傾きで左右に回転する三角形をHTML上で描画 Googleアドセンス合格した方法 VSCodeのChatGPTプラグイン ChatGPTを日本企業はどう使う？ その他AI言語モデル関連 ローカルでも動かせる言語モデル「FlexGe
VS Code ネタ詰め合わせ - Qiita
👻 ぷぇ 🍾🍾🍾 メリークリスマス！！！ 🎉🎉🎉 今年も残り僅かですが、皆様の今年の進捗はどうだったでしょうか？ 進捗ダメでしたか？ 私はと言うと今年も幸い GitHub で evergreen を達成できそうです。( 業務でこの GitHub アカウントは使用していないので、個人での Contributions のみです。 ) Visual Studio Code Advent Calendar 2019 の最後の記事ともなりますし、普段、特に Qiita ではあんまり記事を書かないのもあるので、 VS Code に関するいろいろなネタの詰め合わせをお送りします。 自分的に VS Code の二大拡張 ※ステマ注意 VS Code Tips 来年(2020年)の VS Code 余談: アイコン騒動、再び！！ 自分的に VS Code の二大拡張 ※ステマ注意 「もしも V
Visual Studio Codeの代替を狙う統合開発環境「Eclipse Theia 1.0」リリース。VS Codeの拡張機能を利用可能、デスクトップ版とWebブラウザ版に両対応
Visual Studio Codeの代替を狙う統合開発環境「Eclipse Theia 1.0」リリース。VS Codeの拡張機能を利用可能、デスクトップ版とWebブラウザ版に両対応 Eclipse Foundationは、オープンソースで開発されている統合開発環境「Eclipse Theia 1.0」のリリースを発表しました。 Eclipse Theiaは、「真のオープンソースによるVisual Studio Codeの代替」（a true open source alternative to Microsoft’s popular Visual Studio Code (VS Code) software）だとEclipse Foundationは紹介しており、デスクトップアプリケーションだけでなくWebブラウザからも同一機能が利用できるWebアプリケーション版も提供されています。
VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」
HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは見やすくなりますね！ 枠のボーダーや背景、ネストの深さを自由に変更もできるので、自分が見やすいようにカスタマイズできます。 Blockman -GitHub Blockmanの特徴 Blockmanのインストール Blockmanの使い方 Blockmanの特徴 Blockmanは、コードのネストされたブロックを強調表示するためのVS Code拡張機能です。 サポートしている言語は、JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, Ruby, PHP, R, Go (Golang), Dart, Rust, Swift,
Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
Iosevkaというフォントが良い
突然ですが、皆さんはどのフォントでコーディングしていますか? monaco、Monospace、MSゴシックなど、等幅フォントを軸に種類は多種多様です そんな中、それらを尻目に私が使っているフォントはIosevkaというフォントです Iosevkaとは? 以下の特徴を持ったフォントです 等幅フォント 日本特有の文字種(㈱や㌕など)に対応 これらもきっちりと等幅を守っている リガチャ機能あり !=や<=など、特定の連続した文字列を合成して別の文字で表す機能 エディタもリガチャに対応している必要あり(VSCodeやAtom、iTerm2は対応しているので、大抵のエディタやIDEは対応していると思います) 特定の文字をプリセットの中から選ぶ事ができる プリセットから選んで、特定の文字のみデザインを変更することも可能 全体的な文字の太さ、デザイン、文字のゆとりも設定することが可能 特に 特定の文字
2020年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します - Shibajuku
こんにちは、実は久しぶりの投稿の、どうもしばおです。 さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。 （2020年10月05日更新） 僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有していますw そもそも、VSCode（Visual Studio Code）って？ VSCode（Visual Studio Code）はMicrosoft社が開発したオープンソースのテキストエディタです。 最近様々な高機能テキストエディタが登場していますが、その中でもこのVS Codeはかなり便利な機能がデフォルトで付いていて、かつ軽量なので、インストールするだけでも結構使えます
【超重要な追記あり】Docker Desktop for Macを使ってる人はみんな今すぐvirtiofsを使うんだ！ - Sweet Escape
前提 はじめに virtiofsさっそく試す もうちょっとちゃんと計測してみる Named Volumeを試してみる まとめ 追記（超重要） 追記2 前提 特にVSCodeのRemote Containers使ってる人には耳寄りです。別に使ってなくてもMacでDocker Desktop使ってる人ならあてはまります。 あと、このポストはMacといってもM1 MaxなMacBook Proで確認したものです。なので同じMacでもIntel Macとかだと違う結果になるかもしれません。 また、ここで紹介しているものはまだExperimental（試験的）な機能なので不具合や問題を引き起こす可能性があります。なので試す方はその辺は承知の上で試してみてください。 はじめに さて、MacでDocker Desktopというと「遅い」というのがこれまでの常識。自分のように普段VSCodeのRemote
VSCodeを使いこなすには、まずはよく使用する操作のショートカットを覚えることです。コードを書くときに便利なショートカットとどのように機能するか視覚的に分かるチートシートを紹介します。 ショートカットはmacOS, Windows, Linux対応で、視覚的にどうなるか分かるので、記憶に残りやすいと思います。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ - Qiita
VSCodeでコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニック
僕がおすすめするVSCodeのプラグインまとめ｜TAK / Web Creator.
【11万文字越え】プログラミング初心者に贈る即戦力ガイド - Qiita
VSCodeでDraw.ioが使えるようになったらしい！ - Qiita
「VSCode」を縦書きビューや文字数カウントを備えた原稿エディターにする拡張機能「novel-writer」／青空文庫注記法の注記やルビにも対応。品詞の色分け表示やPDF出力もできる【レビュー】
VSCodeにChatGPTの拡張機能を入れてコードレビューやバグを発見してもらう - Qiita
主にVSCodeではじめるPython開発環境構築ガイド | DevelopersIO
VScodeの設定（settings.json）まとめ【2023年4月更新】
【分野別】VSCodeのおすすめ拡張機能まとめ - Qiita
これがなくては生きていけないVS Codeエクステンション10選 - Qiita
Visual Studio Codeに入れるべき拡張機能【2023年最新版】 - Qiita
2022年度版Python環境構築徹底解説 - Qiita
【M1 Pro/Max対応】M1 Mac環境構築ベストプラクティス - Qiita
2020年5月におけるPython開発環境の選択肢 - Qiita
VSCodeを使いこなすための一歩、コードを書く時に知っていると便利なショートカットのまとめ
新時代のコードエディタ、Cursorのメリット・できることを網羅的に解説した
WSL2でWeb開発環境の構築メモ (zsh, node, dockerなど)
VSCodeで最強のMarkdownノートエディタを作ろう
ChatGPTやAI関連で面白かった・気になった事例まとめ - Qiita
Visual Studio Code＋Markdownでキレイなプレゼンスライドを手軽に作成できる「Marp」／Markdownに慣れているのならばちょっとした拡張記法を覚えるだけ【レビュー】
VSCodeの便利なショートカットが、短時間で身につく魔法のチートシート -VSCheatsheet