VSCodeで効率的にconsole.logする 【Turbo Console Log】 - Qiita
思ってたこと 毎度console.log書いて変数名をC&Pするのが面倒 （スニペット登録してても面倒に感じてました。 動作例 対象の変数名を選択して「Ctrl+Alt+L」（Macの場合は 「Option+Shift+L」） 拡張機能をインストールする サイドバーのEXTENSIONS「(Ctrl|Cmd)+Shift+X」を選択し、「Turbo Console Log」を検索してインストール VSCodeMarketPlace: Turbo Console Log オプション設定 「Turbo Console Log」では、複数のオプションが用意されています。 行末にセミコロンを挿入するか （dafault: false）
Vitest UIを使ってみよう！
export const getLabel = (name: string, age: number) => { return `名前は${name}で年齢は${age}歳です` } import { afterEach, describe, expectTypeOf, assertType, it, vi } from 'vitest' import { getLabel } from "./test" describe(`Testing Types`, () => { afterEach(() => { vi.restoreAllMocks() }) it(`関数であるかどうかと、引数の型を検証する`, () => { //! 関数であるかどうか expectTypeOf(getLabel).toBeFunction() //! 引数の型を検証する expectTypeOf(getLa
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,
VSCodeのChatGPTプラグインを日本語化する - Qiita
VSCodeにChatGPTプラグイン入れると便利ですね。普段からGithub Copilot使ってるといろいろと補完してくれるけど、それとは違った便利さがあります。コードの説明してくれたり、バグを見つけてくれたり、最適化してくれたり、テストを書いてくれたりとダメプログラマー化が捗ります。プラグインの入れ方はこちらの記事が参考になります。 このままだと英語で出力されるので日本語化もしてしまいましょう。設定画面でPrompt（質問文）に日本語を設定してあげると出力も日本語に変わります。 Prompt Prefix: Add Tests 次のコードに対するテストを実装してください Prompt Prefix: Find Problems 次のコードの問題点を見つけてください Prompt Prefix: Optimize 次のコードを最適化してください Prompt Prefix: Expla
VSCodeにChatGPTの拡張機能を入れてコードレビューやバグを発見してもらう - Qiita
ChatGPTとは？ OpenAIが開発するGPT-3という言語モデルをベースとした(執筆当時)チャットアプリです。 こちらの質問に対して、AIが色々な質問に答えてくれて、一般的な内容だけではなく、コードレビューやバグなども発見してくれるめっちゃ凄いやつです。 細かい内容は以下の記事がとても参考となります。 筆者の関連記事 VSCodeと連携して、ブラウザを開かなくてもChatGPTを使用できるようにする 通常はブラウザを開いて使用するのですが、コーディング中にサクッとレビューしてもらったり、バグを見つけてもらえるような拡張機能があったので、そちらの設定方法について記述してみます。 今回インストールする拡張機能 使用までの手順 環境 PC: MacBook Pro (Apple M2) OS: macOS Ventura 13.1 VSCode: v1.74.3 OpenAIの価格について
Visual Studio Code の Live Share をインストールしてサインインする - Live Share
Visual Studio Code で Live Share を使用して共同作業を始める準備はできていますか。 この記事では、Live Share 拡張機能を使用して、Visual Studio Code でコラボレーション セッションを設定する方法を説明します。 ここで説明するコラボレーション アクティビティには、1 人のコラボレーション セッション ホストと 1 人以上のゲストが含まれます。 ホストはコラボレーション セッションを開始した人であり、参加する人はすべてゲストです。 短い概要をお探しですか。 共有または参加のクイック スタートをご覧ください。 ヒント 自分自身のコラボレーション セッションに参加できることをご存知でしたか。 そうすることで、Live Share を自分で試したり、Visual Studio または Visual Studio Code のインスタンスを起動
React開発効率を3倍にするVS Code拡張機能&環境設定 - Qiita
この記事を読むと VSCodeを最適化することで、React開発効率が加速します。 関数コンポーネントの雛形が一瞬で出来る。しかもファイル名がそのままコンポーネント名になる ES6の作法に則った作法で自動でコード整形してくれる。どういう時に関数内の()が省略できるか等を覚えなくて良い useEffectの最適な第二引数を自動で補完してくれる コンポーネントのimport文を自動で挿入してくれる なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、React開発においてはもはやデファクトスタンダードです(長年愛用しているエディタがある方も、是非一度VSCodeを試してみてください)。 さて、VSCodeはそのままでも素晴らしいエディタです。しかし、使用するフレームワークや用途に応じて拡張機能を入れるとさらにその卓越した機能性を発揮します。VSCodeがなぜ世界中の
DeepLの”公式”Chrome拡張がヤバイ。TwitterもSlackも英語でつぶやき放題 | DevelopersIO
ちゃだいん（@chazuke4649）です。 DeepLの公式Chrome拡張機能がヤバかったので勢いにまかせて紹介します。 "公式版"がリリースされてたの知ってた？ DeepL翻訳（ベータ版） - Chrome ウェブストア ベータ版ではありますが、いつの間にか公式版がリリースされていました。自分は今まで公式版がなかったので、以前は非公式版のツールを使っていました。 インストールする Chromeウェブストアからインストールすると、右上にアイコンが表示されます。それをクリックすると以下ポップアップ画面が表示されます。 現時点では以下２つの機能が存在します。 読む: ブラウザ上の文章を任意の言語に翻訳して表示できる 書く: ブラウザ上に入力している文字を任意の言語に変換できる それぞれ試してみます。 「読む」 一般的にはこちらがよく認知されている機能だと思います。 下図のように、翻訳したい
VS Code拡張 Code Spell Checker を使ったスペルチェックが快適 | Hinemosu
「ソースコードは一通りスペルチェックしてね」と言う天命が降りたので、Visual Studio Code用の拡張機能を探したら、Code Spell Checkerと言うのが良く出来ていて快適だった。 わざわざ「コード用スペルチェック」となっているように、キャメルケースやスネークケース（アンダーバーによる連なった単語群）もソレっぽく認識してスペルチェックしてくれる。 使い方的に難しいところはなく、インストールして有効化すると自動で定期的にスペルチェックが行われ、問題がある個所には波線が付いて「問題」にリストアップされる。 間違っている場合は修正する。電球をクリックするかコマンド「⌘/Cmd/Ctrl +.」でクイックフィックスが発動する。 辞書にない単語の場合は右クリックメニューかコマンドメニューから「Add Word to XXXX Dictionary」を選んで辞書登録。ワークスペース
VSCode に Code Spell Checker を導入して typo と戦う - Qiita
✖ この記事は ACCESS Advent Calendar 2018、7日目の記事です。 こんばんは！ @diescake です。 突然ですが、皆さん！ typo してますか！？ 今年も一度はコードレビューで typo を指摘されたのではないでしょうか？ また、苦虫を噛み潰したような苦悶の表情で typo を指摘したのではないでしょうか？ 自分自身もそれなりの typo をこの世に産み落とし、多くの人を不幸のどん底に陥れました。 レビューの網を掻い潜った typo 達一行は master の奥深くに潜み、 数多の親・家族・友人を浄化したエンジニアに対して復讐の炎を滾らせ、虎視眈々と production へデプロイされるチャンスを狙っているのであった… typo の定義 先に断っておくと、ここでいう typo とは、クラス・関数・変数名、文言などのスペルミスを指していて、 多くの場合、動
VS Code の使い始めに入れておくと便利な拡張機能 10 選
はじめに この記事では、IT エンジニアである/ないに関係なく、Visual Studio Code (以下、VS Code) をこれから初めて使い始める人が、最初に入れておくと後々便利になるだろうと思われる拡張機能を紹介しています。 拡張機能 (Extension) とは、サードパーティー製の追加機能のようなものであり、誰でも自由に開発・公開することができるようになっているものです。VS Code は無償で提供されているテキストエディタですが、それだけでは不便というユーザーの悩みを解消してくれるものです。 (という立ち位置で存在していた当初でしたが、最近は標準機能のみでも最早テキストエディタという範疇を超えている気がしなくもないです) まだ拡張機能を使い始められていない/使いこなせていないという方は、是非この記事を参考に、VS Code の拡張機能を使い始めるきっかけにしてもらえれば幸い
文章作成・メール作成に役立つ！ VS Codeの拡張機能「テキスト校正くん」を公開 - ICS MEDIA
文章の校正チェックを自動で行うVisual Studio Codeの拡張機能「テキスト校正くん」を弊社からリリースしました。無料で利用できます。 テキスト校正くん – Visual Studio Marketplace 短い文章であれば目視でもチェックできますが、長文になるとチェックに時間がかかり見落としも多くなってしまいます。また、いくら内容のいい文章を書いても誤字や脱字が多く体裁が整っていないと、印象が悪く読みづらい文章になってしまいます。 そんなとき、「テキスト校正くん」を利用することで、文章チェックの手間を軽減でき、文章の品質を高めることができます。 ▲VS Codeの拡張機能「テキスト校正くん」 「テキスト校正くん」でできること この拡張機能は、VS CodeでテキストファイルやMarkdownファイル等の日本語の文章をチェックします。編集時に自動で校正のチェックを行い、エディタ
Live Share - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Microsoft Visual Studio Live Share Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging
DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com
Chrome用とFirefox用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel — 高梨ギンペイ (@ginpei_jp) June 11, 2018 Chrome版について https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/ Elementsパネル内に “z-index” ペインを追
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/shiba_program/status/1718553267485958458
Home - Requestly
「これは強い」 DeepL公式Chrome拡張が登場 GmailでもTwitterでも外国語の読み書きを一発変換
VSCodeでstyled-jsxの補完までする - Qiita
[React Native]VSCodeでPrettierを入れる - Qiita![[React Native]VSCodeでPrettierを入れる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/311a4477b89728299c989882d33d334c6ab8dad6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmVhY3QlMjBOYXRpdmUlNURWU0NvZGUlRTMlODElQTdQcmV0dGllciVFMyU4MiU5MiVFNSU4NSVBNSVFMyU4MiU4QyVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NmNhNDhlYTM4MDI1NzNjMDRkZjY4YTQ3NGM4OGFjYWY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBvemFraTI1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wNGM3YjhiYjVmNjVkODIxZjlhZTkwMTJhNzRmMWRmMA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3a33b639a6b3cf0892721fd480eaf0da)
Bootstrap v4 Snippets - Visual Studio Marketplace