VS Code Meetup #1(https://vscode.connpass.com/event/155068/ )での発表資料です。
{ "editor.formatOnSave": false, "editor.formatOnPaste": false, "editor.formatOnType": false, } この記事で紹介している拡張機能のIDは、記事の最後にまとめています。また、設定の方法については設定のやり方に記述しています。 以下は、この記事で紹介する拡張機能のカテゴリ一覧です。 設定ファイル関連(Yaml, Json, Toml) Git関連 Markdown関連 カラー系 API関連 コンテナ その他便利な拡張機能 ネタ系 設定ファイル関連(Yaml, Json, Toml) 特にYamlやJsonはどのプロジェクトでも使用する可能性が高いので、必須の拡張機能となってくるかと思います。 Prettier esbenp.prettier-vscode jsonだけの設定では、VSCodeの設定ファイ
はじめに こんなツイートを見て執筆をしようと思いました。 実際に、VSCodeは機能の追加や拡張機能の開発が活発に行われており、かつUIもユーザーフレンドリーであるため人気のエディターだと思います。VSCodeを使いこなせるのとそうでないのではエンジニアリングの生産性に大きな差が出てしまうと思います。 パンくずの設定 '>' を入力します。 '>' preferences: Open User Settings (JSON)を入力します。 僕のsettings.jsonは以下です。 { "workbench.colorTheme": "GitHub Dark", "terminal.integrated.fontFamily": "MesloLGM Nerd Font", "terminal.integrated.profiles.osx": { "fish": { "path": "/o
注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる(人間が気にする必要のない問題なのに!) 直接実行するより遅い(同様に prettier-eslint も遅い) ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
はじめまして。Shougo(@ShougoMatsu) という者です。私は現在、日中ソフトウェアエンジニアとして働く傍ら、GitHub Sponsorsで支援を頂いてテキストエディタ(Vim、neovim)本体を改善する活動やテキストエディタプラグイン開発を行っています。 今回「自分自身のキャリアを振り返り、スキルを向上させるために取り組んできたこと」について解説してほしいという依頼がありました。自分がプラグイン開発を始めてから、もう15年という長い月日が経っていて、世間ではテキストエディタの大ベテランと思われているようです。もうそこまで来てしまったのかと思うと同時に、時間さえかければ誰でもここに到達できると私は考えています。 私をはじめ誰しも最初は初心者です。右も左も分からない状態から始まるのです。私の経験が「自分はこれからどうすればよいのか分からない」「何か強みを持ちたい」と思っている
この連載では、Notionであらゆるものを作れるとご紹介してきました。Notion単体でも非常に強力なツールなのですが、実は他のツールやサービスと組み合わせることによってさらに実現できる世界が広がります。 今回は、Notionを便利にするサービスをご紹介します。 1. リッチなWebサイトを作れる「Wraptas」 リッチなWebサイトを作れる「Wraptas」 Wraptas https://wraptas.com/ Notionの標準機能としてもWebに公開することはできますが、Wraptasを利用するとさらにカスタマイズできるようになります。 独自ドメインを利用できる JavaScript, CSSを設定できる SEO向けの設定ができる 例えばBLAM社の採用サイトやSHIBUYA SLOW STREAMのサービスサイトはWraptasによって作られています。一見するとNotionで
Visual Studio CodeがPython対応強化。Jupyter Notebooksネイティブ編集、Pythonファイルの直接実行など オープンソースのコードエディタ「Visual Studio Code」が10月のアップデートでPython関連機能の強化などを行いました。機能強化はおもにPython拡張機能を通じて提供されます。 The October release of the #Python extension for @code is here! Try out native editing of #JupyterNotebook files , a button to run Python files in the terminal ▶, and improvements to the Python Language Server. Learn more on our
学習している内容や日々の考え事など、さまざまな情報を入力しながら自然に整理していくパーソナル・ナレッジ・マネージメント(PKM)ツールが注目されています。 しかし便利ではあるものの使い方が難しかったり、マニアックな設定が要求されたりするPKMツールが多い中、高機能なのに簡単に利用できるRemNoteが、最近モバイルアプリも登場して頭一つ抜けた存在になってきたように思います。そこで本稿では初心者向けにRemNoteの使い方の紹介を通して、PKMの基本的な考え方について深めてみます。 情報が複雑になってきたら、ツールも進化しなければいけない 忘れてしまっては困ることがあると、私たちはメモをとります。買い物でそろえるもの、テレビで耳にしたお得な情報、来週の予定、ちょっとした考え事。どんなことであっても私たちはメモをとります。 手段は紙でもスマートフォンでも変わりません。ふだんは意識しないほど当た
ノートアプリ「Obsidian」を使いこなす 「Obsidian」でノートを作るときの考え方とは? ~デイリーノートの活用と、PKMとしてのノート術 前回までの記事で、Obsidianの基本的な設定は完了しています。あとは、ノートを自分の好きなようにMarkdownで書いていけばよいのです。 しかし、ノートを書くといっても、何から手をつければよいのかわからない人が多いでしょう。 ノートの書き方は人によって違ってよいのですが、先人が残してくれた知恵がいくつか公開されています。その方法と合わせて、私がノートを作るときの考え方を紹介します。 デイリーノートを使う Obsidianではじめてノートを作成する人に対して、私がおすすめしているのは前回の記事で紹介したコアプラグインの「デイリーノート」を使う方法です。 デイリーノートとは、名前の通り毎日のノートのことです。初期設定のままで設定を変更してい
本日 2023-08-05、悲しいお知らせが入ってきました。Vim の作者 Bram Moolenaar 氏が亡くなりました。謹んでお悔やみを申し上げます。 以下は Bram Moolenaar 氏のご家族から vim_announce に送られたメッセージです。 https://groups.google.com/g/vim_announce/c/tWahca9zkt4t 親愛なる皆様へ Bram Moolenaar が 2023年8月3日に逝去したことを、謹んでお知らせいたします。 Bram はここ数週間で急速に進行した病状に苦しんでいました。 Bram は人生の大部分を Vim に捧げ、皆様が一員である Vim コミュニティを大変誇りに思っておりました。
技術部データ基盤チームの @zaimy です。今回は、 Visual Studio Code(以下 VS Code)と Docker コンテナを使って開発環境を構築する方法を紹介します。 データ基盤エンジニアの開発環境として、Python を使用する単一コンテナを例に記述しますが、他の言語や Docker Compose を使う場合でも応用できます。 背景: M1 Mac (Monterey) に Python 3.8.12 をインストールできない 先日、業務で使用するマシンを Intel Mac から M1 Mac に切り替えたのですが、CPU アーキテクチャが異なることに加えて、OS のバージョンが上がったことで Apple Clang に下位互換性のない変更が入っており、業務上ある理由で必要な Python 3.8.12 のインストールが困難でした。 そこで、私の所属するチームは全員
こんにちは、みみぞうです。 ナビタイムジャパンで『システムや開発環境、チームの改善』を担当しています。 本記事は社内勉強会で発表した内容に沿っています。 この勉強会は、社内全エンジニアの1/4ほどが参加して好評だったため、記事を書かせていただくことになりました。 なお、Vim歴は2年半です。 読んで欲しい方以下のように感じる方を対象にしています。 ❶ VimよりVS CodeやJetBrainsのIDEを使った方が速いので使う必要がない ❷ Vimは学習コストが高いのにメリットがない ❸ Vimの勉強/スキルアップの仕方が分からない この業界に入って7年以上もの間..私も❶~❸の考えをもつ人間でした。 もし昔の自分に会えるなら..『今すぐVimの思想を取り入れよ』と言いたいですね😅 Vimは使わなくていい、されどVimの思想を取り入れよ『すべての開発をVimでせよ』なんて言うつもりはあり
⚪︎ : 無制限のBasic、限度ありのAdvance △ : 限度ありのBasic Zed Atomの製作者達によって作成されたOSSのRust製エディタ。現状はMacOSのみで使用可能。そのほかのOSも現在対応中。パフォーマンスを重視しているので軽い。AIは搭載していないが、Copilotを使用することは可能。 Github : zed-industries/zed インストール方法 https://zed.dev/download からインストールしてください。(MacOSのみ) 使用方法 以下に詳しく書かれていました。 思考のスピードでコードを書け!!Rust製の次世代エディタ「Zed」 Positron VSCodeをベースにした次世代データサイエンスIDE。 インストール方法 https://github.com/posit-dev/positron/releases からイン
日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。 一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を使うと、コード上にメモを残しながら読み進めることができるので、既存のコードを読む際に便利です。 Code Tour とは VSCode の拡張機能で、コード上にメモを残しつつ、そのメモをたどることができるツールです。 使い方 ツアーを始める コマンドパレットから「Code Tour: Record Tour」を選択すると、ツアーの記録モードになります。 ツアーの名前 どのソースに紐づけるか(紐付けなし、ブランチ、タグ) を選択すると、リポジトリ直下に .tours/${指定したツ
ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 コンピューターはプログラムコードで動作しますが、このコードは人間が記述している以上、どうしてもエラーを含んでしまうことが避けられません。 しかし、最近は大規模言語モデルを使ったGPTなどジェネレーティブAIの急速な進歩により、目的とする処理を文章として渡すだけで、AIがある程度プログラムコードを出力できるようになってきました。 そして、BioBootloaderと名乗る開発者による新しい試みでは、プログラム開発の際にどうしても必要となるデバッグ作業を、GPT-4をベースとするAIで行うことを可能にしました。このツールは、プログラムを自動修正することから、似た能力を持つアメコミヒーローにちなんで「Wolveri
はじめに Microsoftの提供するVisual Studio Code(VSCode)は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させ、利用の領域を拡げられることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確認していま
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
TL;DR まずはこいつをみてくれ。 左右に分割されたエディタウインドウに、テキストエディタとターミナルが並んでいるのがお分かりになられるでしょうか!! なにそれ? これは、先日リリースされた Version 1.58 (June 2021) に含まれる以下のアップデートによるものです。 Terminals in the editor area Terminals can now be created in or moved to the editor area, enabling a multi-dimensional grid layout that persists and remains visible regardless of panel state. Terminals in the editor area - Integrated Terminal - Visual Stu
はじめに みなさんこんにちは。Sansan事業部プロダクト開発部のiOSエンジニア荒川です。 以前はRDBMSの記事*1を寄稿し、好評いただいたこともあり、定期的に車輪の再発明系の記事を書いていこうと思います。 さて本日はタイトルの通り、VimやEmacsに代表されるターミナルで動作するインラインテキストエディタをGoで開発してみました。 ソースコードは以下のリポジトリに置いているため、ぜひ参考にしてください。 github.com 完成品 文字だけだとイメージも湧きにくいので、まずは完成品をお見せします。 最低限エディタの動きは出来ている、というレベルの完成度ですね🙏 特徴 1000行インラインエディタ 文字入力/挿入/削除 画面スクロール キーボードショートカット ファイル読み込み/保存 Goのコードハイライト機能 実装の方針 今回はただ開発するだけではなく、いくつかのこだわりポイン
VScodeだけでGit操作を完結させる方法について書くのだ。 👀その前に! この記事は、以下の2つの拡張機能がインストールされている前提で進めるのだ。 Git Graph - Visual Studio Marketplace GitLens — Git supercharged - Visual Studio Marketplace インストールしておいてほしいのだ。 ✅ステージング(git add ◯) 以下のようにするのだ。 +ボタンをクリック:ステージングする ーボタンをクリック:ステージングを解除する ▲ステージング→解除 ✅コミット名を自動でつける 右にある✨ボタンを押すと、コミット名を自動で決めてくれるのだ👇 ▲この例だと、変更内容が意味不明すぎて変なコミット名になってるし、現状英語だけみたい? これは、GitHub Copilotの機能なのだ。 ✅コミット(git c
米GitHubは8月11日(現地時間、以下同)、ソースコード共有サイト「GitHub」上でコードエディタ「Visual Studio Code」のWebブラウザ版を起動できる機能「Codespaces」のβ版を公開した。Twitterでは「便利すぎる」などと、ITエンジニアを中心に話題になっている。 ユーザーはGitHubのリポジトリ画面で「.」(ドットキー)を押すとVisual Studio Codeが起動する。個人ユーザーは当面無料で利用でき、チーム向けや企業向けのプランを利用している法人ユーザーも9月10日までは無料で試用できる。 法人向け料金は従量制で、計算に使用するCPUの性能と利用時間で変動する。最も安い2コアのCPUを使う場合は1時間で0.18ドル(約20円)。使用したデータの容量1GB当たり0.07ドル(約7円)も月額で別途請求する。 Visual Studio Codeは
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 (簡単7steps) (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
MicrosoftのVisual Studio CodeやSublime Textなど、GUIで動作するテキストエディタが数多くリリースされる中で、コマンドラインベースで動作するテキストエディタ「Vim」は、リリースから約30年たった今でも多くの開発者に利用されています。そのVimがなぜ開発者に広く普及したのかを、Vimの歴史とともにソフトウェアエンジニアのNikola Đuza氏が自身のブログで語っています。 How Did Vim Become So Popular | Pragmatic Pineapple ???? https://pragmaticpineapple.com/how-did-vim-become-so-popular/ Đuza氏はVimを「全能」と評価するとともに「人々が時々引っかかる場所」とも表現。確かに、Vimにはノーマルモードと入力モードの使い分けなどとい
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
すると自分用のVisual Studio Codespacesのインスタンスが起動し、そこへWebブラウザで接続するか、ローカルのVisual Studio Codeからリモートで接続すれば、(Visual Studio CodeのRemote Developmentと同様に)コードを編集し、ターミナルからコマンドを実行し、ビルドやデバッグなどが可能になります。 Visual Studio Codespacesの料金は選択されたCPU性能とメモリ容量によって異なりますが、Visual Studio OnlineからVisual Studio Codespacesへのリニューアルに伴い、料金はより安価なものに改定される予定。 Visual Studio Codespaceは、その実行イメージを取り出してユーザー自身のサーバや自身で用意したクラウドのインスタンス上で実行することもできます。この
筆を選ばない弘法大師も、テキストエディタは選ぶかも 毎日さまざまな話題のエントリーが生まれるはてなブログの中から「旬な話題」をピックアップする企画「はてなブログで話題」。今回は「執筆ツール」をテーマに記事を紹介します。 編集という仕事柄、テキストエディタは毎日触る大事な仕事道具です。仕事の内容にあわせて設定などを変えると非常に捗ります。 VSCodeをメインのエディタにして半年たったので入れてある拡張機能を紹介します - 壁に飾られた絵画を見ようとしてその絵に近寄ってはいけない blog.ayako-m.work こちらは10月第1週のはてなブログランキングにランクインした、はてな編集部・ayako_m(id:ayakoya)のエントリー。仕事で使っているコードエディター「VSCode」のカスタマイズを紹介しています。便利そうですね。 ayako_m(id:ayakoya)の場合は「Web
ここでいくつかのルールとして motion-count-multiplied 例えば10jで十行下へ移動、d2kで上2行を削除など operator-doubled 例えばyy, dd, cc, >>とか、2回繰り返すとカーサーのある行に動作する upper case operator 例えばc->C、d->D, y->Yのように、現在のカーサーから行の最後まで動作するケースと、対になっている(逆の機能を持つ)ケース、例えばp->P, o->O, n->N, a->A, i->I, f->Fなど)に大まかに分けられる exclusive inclusive 例えば、yiw vs yaw, cib vs cabの違いで、テキストオブジェクトの内部(inner)だけか、境界線も含めるか(around) があります。これらのルールは他のプラグインにもよくみられるので、Vim wayに慣れればプラ
普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 VSCode 関連記事 VSCode の初期設定 拡張機能の探し方 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popular: 最も人気のある拡張機能 Recently Added: 最近追加された拡張機能 まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください 基本 Material Theme VSCodeの数あるテーマの中の一つです。 歯車のアイ
この記事は、著者の許可を得て配信しています。 https://blog.robenkleene.com/2020/09/21/the-era-of-visual-studio-code// 使用するツールを選ぶときに私が最も重視しているのは寿命です。ソフトウェアの学習は投資であり、後で別のアプリケーションに切り替えなければならない場合は、今まで投資してきた資産の一部を失うと言っても過言ではありません。 ほとんどのソフトウェアのカテゴリにおいて、寿命の長いソフトウェアを選ぶのは簡単で、最も人気のあるツールは、通常、最も長く続いているものです。Microsoft ExcelとAdobe Illustrator は両方とも1987年にリリースされましたが、今でもそれぞれのカテゴリで最も人気のあるソフトウェアであり続けています。 一方、テキストエディタは、最も人気のあるオプションが一番古いものでは
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。 Modern Fluid Typography Editor Modern Fluid Typography Editor -GitHub Modern Flu
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く