SREチームマネージャーの藤原です。 LM Studio + Gemma 3 + Cline + VSCodeの環境を自由研究的に試用したので、その報告エントリです。 モチベーション プライベートでコードを書く際も最近はClineなどを使ってLLMを使ってコーディングをすることが徐々に増えてきました。 VSCodeとClineを組み合わせて外部サービスをつかってコードの変更作業を実施する場合、 何かコードの変更を依頼するたびに、財布の中身から少しずつお金が溢（こぼ）れていく感覚があるでしょう。 1回1回の額は少額とはいえ、多数回繰り返すとなかなかの金額になってきます。 会社では予算の範囲内であれば、利用できますが、個人開発の場合はなかなか躊躇してしまうこともあるでしょう。 また、先日Googleが公開したオープンなローカルLLMのGemma 3も話題になったりしています。 そこでAPI課金

VS Codeの小説執筆機能拡張novel-writerの3.1.0を公開します。今回のアップデートでは文字数カウント機能に、400文字詰原稿用紙換算の枚数・行数表示を追加しました。もちろん、原稿フォルダーの総計機能や、原稿ツリー、締切フォルダーの目標数設定機能も対応しています。また、表示項目をプロジェクトごとに設定できるようにもなりました。原稿の種類やパソコンの画面サイズに合わせて設定できます。 VS Codeマーケットプレイス：novel-writer 原稿用紙枚数表示は（もちろんですが！）文字数を400で割ったものではなく、テキストを段落ごとに分解してから20文字で分解して行数を出し、20枚一まとめにして集計しています。空行を作ると1行増えますので、40文字で1枚分になるような原稿にも対応しています。追い出しや禁則処理は行なっていませんので実際の原稿用紙とは差が出てきますが、目安とし

日頃マークアップで使用しているVScodeのスニペットをまとめてみました。 スニペットの指定方法 VScodeを開いて Code(WindowはFile) → Prefences→ User Snippets から、スニペットを指定したい言語を選ぶ あとはデフォルトの記述例に従ってjsonファイルにスニペットを記載していく 使い方 設定した言語のファイルを開いて、"prefix"に指定した単語を入力してTabキーを押せば展開される 例： html.jsonで以下のスニペットを指定した場合 "test1": { "prefix": "test", "body": [ "<div class="test">test</div>" ] },

かわいくないワ...👁👄👁 これではテンション上がりません。コーディングに置いてモチベーションは最も大事な栄養素です。 テーマを変更してモチベを上げていきます。 テーマを変更 illusion お好みのテーマをダウンロードしてテーマを有効にします。 ...いいんじゃない？👁👄👁 まだそこまでかわいくありません。 コーディングにおいて、インデントは最も大事な要素です。そんなに重要なものが光っていないのは怠慢という言葉を禁じ得ません。インデントを光らせていきます。 indent-rainbow 拡張機能を有効にしたらこうなっているはずです。 トーンが暗いわネ...👁👄👁 setting.jsonでハイライトの色を変えていきます。 "indentRainbow.colors": [ "rgba(128, 64, 64, 0.5)", // 1インデント目の色 "rgba(128

先日アップデートされた、VS Code v1.71で「スティッキー スクロール」がさらに便利になったので紹介します。 「スティッキー スクロール」はv1.70で実験的な機能として実装されましたが、v1.71で正式に実装され、さらに追従行数を設定できるようになり、スティッキースクロールで関数やクラスをリスト化して移動もできるようになりました。

Join a VS Code Dev Days event near you to learn about AI-assisted development in VS Code. October 20, 2021 by Chris Dias, @chrisdias Back in 2019, when the .dev top-level domain opened, we picked up vscode.dev and quickly parked it, pointing at our website code.visualstudio.com (or, if you are from the Boston area like me, we "pahked it"). Like a lot of people who buy a .dev domain, we had no idea

VS Codeには便利な機能拡張がたくさんありますが、その中から特にHTMLを書いたり、修正する時に役立つ機能拡張を紹介します。 VS Code Extensions for HTML by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張を紹介します。すべてを気に入るとは思いませんが、自分が抱えていない問題を解決したり、必要以上の機能を備えているかもしれません。それでも構いません。ここで紹介するのは、私が実際に使用し、気に入っている機能拡張です。 VS Codeの機能拡張を紹介する前に、Emmetから始めたいと思います。これは機能拡張ではありませんが、VS

テックタッチのバックエンドエンジニアの taisa です。 社内勉強会で、Visual Studio Code（以降 VSCode と記載）ナレッジ共有会を実施したのでその内容を紹介します。 今回の趣旨は「VSCode で各自がよく使う機能やショートカット、ちょっとしたノウハウを共有することで開発効率を向上させたい」というものです。自分自身 VSCode を使いこなせておらず、他のメンバーの使い方に興味がありました。共有会では、みんなで順番に画面共有しながら進めていきました。 コマンドパレット編 シンボル検索編 ショートカット編 最近開いたプロジェクトを開く 最近開いたファイルを開く / ファイルを検索する サイドバーを開く/ 閉じる、パネルを開く/ 閉じる、エクスプローラを開く 指定のエディタに移動する Grep する 特定の文字列を選択して置換する 定義へ移動、直前の場所に戻る、直前の

自分は、WordPressではGutenbergというエディターを使って記事を投稿してます。 Gutenbergは、Markdown記法を使っても記載ができます。Markdownとは軽量マークアップ言語のことです。 軽量マークアップって何？ってことですが、 たとえば、見出しは ## 見出しレベル1 ### 見出しレベル2 #### 見出しレベル3 というように記述できます。いちいち、WordPressで段落設定をポチポチしなくて済みますね。 普段から仕事でMarkdownエディターとしてVisual Studio Codeを使っています。 これでBlog記事を書いたら効率的になるのでは？と 実際に実践してみると、ビンゴでした。 Visual Studio CodeでBlogを書けば生産性があがったので、まとめてみました。

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料

スニペットとは wikiを参照すると 情報処理の分野ではよく使う短いプログラムコードを統合開発環境から呼び出す機能のことである. また, 呼び出される短いコードのことをスニペットと呼ぶ場合もある. とのこと. この機能はVSCodeでも標準で搭載されています. 以下でスニペットの定義と呼び出しの仕方について書いていきます. VSCodeで自作スニペットを作成する ユーザー自身でスニペットを定義するためにjsonファイルを開く 言語ごとにjsonファイルが用意されているため, そこにスニペットの定義を書いていくことになります. jsonファイルの開き方は以下のどちらかです. jsonファイルの開き方 : パターン1 Ctrl + Shift + Pでコマンドパレットを開き, [configure user snippets]と入力します. そうすると言語の一覧がズラッと出てくるので, 設定し

「Visual Studio Code」2020年3月版の新機能、時系列でファイルへの操作履歴「タイムラインビュー」、PC間で設定の同期、Undo/Redoがファイル再開後も有効など マイクロソフトはオープンソースで開発している無償のコードエディタ「Visual Studio Code」の2020年3月版（バージョン1.44）を公開しました。 The March release of @code is out! New Timeline view, extension pack display, smoother file navigation, Remote Containers features, and more! Check out the all new features: https://t.co/NzNfF0BTl3 and update now! pic.twitter.c

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

「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知

言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。 Tipsは**ここ**から。 拡張機能 24 選 1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく強い。 「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。 git blameする手間なくなる。 3. Prettier コードのフォーマットは自動でやりましょう！ 複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。 関連のTipsはここ 4. Git History Git logが見やすい 5. Bracket Pair Colorizer カッコの対応を色付きで表示してくれる。 ものすごく読みやすくなって最高&最高！！ なおBeta版ですが、後継となるBracket Pair Colorizer 2も出