Markuplintを使って高品質なHTMLコーダーになる世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。
VSCodeのvim操作を高速化！ vscode-neovimを導入してみた
この記事はFIXER 3rd Advent Calendar 2020 2日目の記事です。 ライトなVimmerの和田です。今までVSCode上でVIMと同様の操作を行えるようにVSCodeVimを導入してたんですが、こいつはまだまだ発展途上らしく、動作がもっさりしていたりだとか.vimrcのサポートが甘かったりなどの問題を感じていました。最近Vue.jsを触りはじめてVSCodeを使う機会も多くなってきていたので、なんかいい代替がないかな～とネットサーフィンをしていたら件のvscode-neovimが良いらしいという話を見つけました。というわけで今回は、お試しでvscode-neovimを導入してみたいと思います。 vscode-neovimとは https://github.com/asvetliakov/vscode-neovim VSCodeVimのようにVIMをエミュレートするの
VSCodeで全角スペースを可視化する「Zenkaku」
はじめに プログラミング初心者にありがちなミスとして、半角スペースを打つべきところを間違えて全角スペースにしてしまってブログラムが動かない、というものがある。（すでに何度かやっている） 熟練者でもたまにやってしまって恥ずかしい思いをするそうな…。 今回はそんな初歩的なミスを防ぐためにVSCodeにZenkakuという拡張機能をインストールしてみた。 Zenkakuとは エディタ上の全角スペースを可視化してくれるVSCodeの拡張機能。 こんな感じで、全角スペースをハイライトしてくれるので入力ミスに気づきやすくなる。 インストール方法 実行環境：MacBookAir(M1) BigSur11.4 VSCodeを開いて、画面左にある「アクティビティバー」 > 「拡張機能」を開く。 「Zenkaku」を検索してインストール 全角スペースに白でハイライトがつくようになった。 Zenkakuを常時起
超融合!時空を越えた絆 Neo Vim(VSCode)を試してみた
2020年のエディタ・IDE界 2020年のエディタ・IDE界は、Vim vs Emacsとか言われていた時代も過去になり、昨今はVSCode１強になりつつあります[1]。VSCodeはデフォルトの機能も必要十分ありますし、拡張機能のエコシステムが発達してますし、リリースサイクルも早くてすばらしいの一言ですね（あとやっぱりMSがバックにいるのが何気に強い）。2015年にリリースされてからまさに飛ぶ鳥を落とす勢いです。 他に有料だとJetBrainsのIDEとかはやっぱり出来がいいですね。あとVSCodeの拡張がそのまま使えるEclipse Cheなんかも新興勢力として期待しています。 私について 世の中はいろいろ動いてますが、私はVimをかれこれ15年以上使ってます。2016年くらいにVimからNeovimに乗り換えましたが、今でもほぼ毎日使っています。 特に世界平均と比較した際に、Vim
VSCodeでblackとflake8の設定をしてみた | DevelopersIO
DA事業本部の横山です。 プロジェクトでPython用にFormatterとLinterを導入することとなり、blackとflake8を採用しました。 ファイル保存時に両者を適用するためのVSCodeの設定内容について記載します。 PythonのFormatterで、PEP8に準拠した形でコードを整形してくれます。 PythonのFormatterとしては、他にautopep8やyapf等が存在します。 blackの特徴としては、カスタマイズがほとんどできず1行あたりの最大文字数程度しか設定できません。 今回は、formatterにプロジェクト固有のルールを付与する必要がないためblackを利用することとしました。 pip install black 上記コマンドで実行環境にインストールしておきます。 PythonのLinterで、PEP8に準拠しているか、シンタックスチェック、循環的複雑
Visual studio codeでhadolintを使うためのTips - Qiita
What is hadolint? hadolint は Dockerfileのlinterです。 Dockerfile内でベストプラクティスに沿っていない書き方を見つけて警告を出してくれます。 hadolint for Visual studio code hadolint - Visual Studio Marketplace Dockerfileを編集・保存していちいちlinterにかけるのも面倒くさいのでVS codeの拡張が存在します。 しかし、そこのREADME.mdにはhadolintをhomebrew経由でインストールしたものを利用する方法しか紹介されていません。 自分はdocker container内のhadolintを使いたかったので今回その方法について調べたのでTipsとして残しておきます。 How to use hadolint installed in a co
VSCode NeovimでVSCodeをVimのように操作する - sambaiz-net
VSCode NeovimはVSCodeをVimのように操作できるようにするExtension。 同種のExtensionとしてVimをエミュレートするVSCodeVimというのもあるが、 こちらはエミュレートするのではなく実際のNeovimをバックエンドとすることで ほぼ完全な互換性と軽快な動作を実現しているらしい。 Neovimをインストールする。 $ brew install neovim $ which nvim /usr/local/bin/nvim $ nvim --version NVIM v0.6.1 Build type: Release LuaJIT 2.1.0-beta3
TypeScriptの型情報を扱うVSCode拡張機能をlanguage-service-pluginで軽量化した話
個人的に開発・メンテナンスしている TypeScript の複雑な型定義を展開表示できる VSCode の拡張機能 ts-type-expand を軽量化したのでその手法を紹介します 内容としては拡張機能独自で建てていた CompilerAPI とウォッチャーを、VSCode 内蔵の vscode.typescript-language-features の CompilerAPI を使うようにした形です このやり方を見つけるまでに苦労したので CompilerAPI を使うような拡張機能開発をしようとしている方の一助になれば幸いです 抱えていた問題点 ts-type-expand は VSCode 標準の変数のホバーだと丸められてしまう こういう型定義を こういった形で最終的に解決される型に展開して TreeView で確認できる拡張機能です 選択されている変数等の型情報を拡張機能側で拾
かんたん！VS Code拡張機能開発 | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、VS Code拡張機能（Extension）の開発手順について簡潔にまとめたのでご紹介します。 前回のエントリでもVS Code拡張を作成しました。既存ブログなどを見ながら四苦八苦して実装したのですが、手順自体は意外と簡単でした。 手順概要 VS Code拡張機能を開発する手順は以下のようになります。 プロジェクト作成（yoコマンドで1発） コマンド内容を実装（JS/TSで処理を記述） コマンドの呼び出され方を定義（package.jsonを編集） 動作確認（VS Codeのデバッガーを使用） VS Codeで拡張機能として利用可能にする（vsixファイルに変換してインポート） なお、ここで紹介するのは自分で開発して自分で使うExtensionを作る想定の手順です。マーケットプレイスへの公開手順は紹介しません。（ただし公開手順も難
【小ネタ】極力キーボードから手を離したくないライトvimmerがVSCodeに設定しているショートカット（基本的なファイル操作編） | DevelopersIO
また、VSCodeではkeybindings.jsonというファイルを編集することで、任意のショートカットキーを設定可能です。 Cmd+shift+p のコマンドパレットからkeyboard と打つことで、「基本設定： キーボードショートカットを開く（JSON）」を選択することでkeybindins.jsonを編集できます。 以下、ショートカットの設定内容について記載していますが、そこで表示する設定はkeybindings.jsonに記載している内容となります。 具体的な設定の前に。ショートカット設定で知っておいたら便利なこと ショートカットをGUIで設定する ショートカットを設定したいけど、なんていうアクションなんだろう？今の設定はどうなっているんだろう？ という時には、shift+Cmd+pでコマンドパレットを表示してkeyboardと打ち、「基本設定： キーボードショートカットを開く
アクセシビリティを考慮したHTMLコーディングガイド
これ何なの？ もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう！という方の参考になればと思い共有させて頂きます。 ※そもそもアクセシビリティって何なの？という方は、ウェブアクセシビリティ基盤委員会のサイトを見てみてください🔍 目次 おすすめVSCode拡張機能 🕹ボタン 📷 画像 🔍 ナビゲーション 💻 フォーム おすすめVSCode拡張機能 axe Accessibility Linter をインストールしておくとimgタグのalt忘れなど警告が表示されるので、アクセシブルでない書き方を未然に防げるので便利です！ 🕹ボタン buttun タグを使いましょう
[書評] 「VS Code Meetup Book」を読んでみました | DevelopersIO
AWS 事業本部の とーち です。 VS Code Meetup Book という本を読んでみたので、感想と概要などをお伝えしたいと思います。 書籍について 書籍名：VS Code Meetup Book 以下リンクから購入できます。 どんな人におすすめ？ Visual Studio Code（以下 VS Code)を触ったことがない、初めて触るので使い方をざっくり知りたい という方におすすめです。私自身、VS Code をほとんど触ったことがなかったのですが、本書を読むことで基本操作について理解できました。 目次と章ごとの概要について 1. Hello VS Code ハンズオン VS Code の画面構成の説明から始まり、デフォルトで備わっているファイル検索やターミナルなどの機能説明や拡張機能のインストール方法、VS Code での Git の使い方まで丁寧に解説されていました。各項目
![[書評] 「VS Code Meetup Book」を読んでみました | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/66a2e480597adcb4961d0a6d20f468ad0575f407/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2022%2F06%2Feyecatch_developersio_darktone_1200x630.jpg)
VisualStudioCodeでMarkdownを書く際に入れておきたい便利な拡張機能5選 - Qiita
ドキュメント類はMarkdownで書きたい。エディタはVSCで。 何でもかんでもMarkdownで書きたいお年頃なVSC愛用エンジニアな方に向けて、入れておいて損はない（気がする）拡張機能を5つ紹介しておきます。 特にQiita用のメモ書きやらシステム要件定義やら書く機会が多いエンジニアの方なら役立つんではないでしょうかね Markdown All in One インストール：Markdown All in One All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more). この拡張機能はMarkdownを記述する際に便利なショートカットキーを提供してくれる拡張機能です。 以下にショートカットと使えるコマンドを簡単に書いておきます。 キーボードショートカット キー コマン
JSON の指定箇所のパスをコピーできる VS Code 拡張機能「copy-json-path」 | DevelopersIO
VS Code で 開いている JSON ファイルの指定個所のパスをコピーできる拡張機能ってないのかなと調べたところ、そのまんまのものがあったので紹介します。 例えば以下のような JSON があったとします。 "g" を取得するためには a.b.c[1].foo[1] のように JSON のパスを指定して取得する必要があります。 { "a": { "b": { "c": [ { "foo": ["d", "e"] }, { "foo": ["f", "g"] } ] } } } 上記は簡単な JSON なので人間が目で一個ずつ追っていけばいいのですが、minify されていたり、配列の長さが多かったりする場合は目で追っていくのは大変です。 また VS Code も JSON のパスをパンくずリストの形で示してくれていますが、サイズの大きい(?) JSON ファイルの場合は一部のみの表示にな
VSCodeでOpenAPI Specificationドキュメントを編集する際に便利なプラグインたち | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 REST APIを実装する際に、API仕様書としてOpenAPI Specification（OAS、Swagger）準拠のドキュメントをよく作成するのですが、OASドキュメントはとても記述量が多くなることがあり、何の記述支援もなく編集するとなると結構たいへんです。 OpenAPI Specification - Version 3.0.3 | Swagger そこで今回は、VSCodeでOASドキュメントを編集する際に使ってみたら便利だったプラグインを紹介します。 OASドキュメント 参考として、次のようなOASドキュメント（Yamlファイル）で試してみます。 specfile.yml openapi: 3.0.3 info: title: Hoge REST API version: 0.0.1 tags: - name: user
VSCodeおすすめ設定大公開！！おすすめ拡張機能も - Qiita
はじめに 皆さんVisual Studio Code(以下VSCode)使ってますか？ 私はメインで使っているのですが、自分なりにしっくりくる設定や拡張機能がある程度揃ってきたので公開しちゃいます。 おすすめ設定だけではなく、おすすめの機能もできる限り紹介したいと思いますので、最後までぜひお付き合いください。 ※プログラミング言語固有の設定の解説は軽めですのでご了承ください。 GIF画像が小さい場合は、クリックして頂けると拡大して表示が可能です デフォルト機能編 Local History機能 Gitは非常に便利なので、皆さん使われていると思います。 Gitはコミット単位で履歴が管理できますが、保存単位で履歴が見れると嬉しいな、保存単位で復元できると嬉しいな、と思うことはないでしょうか。 私はVSCodeは自動保存をオフにして、手動で保存するので、保存単位で履歴が見れると嬉しいなと思うこと
VS CodeでJSON Schemaを使ったらCircleCI Configの編集がすごく楽になった | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、Visual Studio Code（VS Code）で、CircleCI Config（.circleci/config.yml）に対してJSON Schemaによるバリデーション/アノテーションを効かせたら編集がすごく楽になったので、紹介をしたいと思います。 どう楽になったのか？ VS Codeで下記のようなCircleCI Configを開いています。 .circleci/config.yml version: 2.1 executors: my-executor: docker: - image: circleci/node orbs: aws-cli: circleci/aws-cli@2.1.0 jobs: get_token: executor: my-executor steps: - checkout - aws
VS Codeにtextlintで自動校正(macOS) - ヤマムギ
今年から執筆環境をVS Codeに変えました。 VS Codeが軽量との噂があったのと、textlintを使ってみたかったからです。 環境 MacBook Pro (13-inch, M1, 2020) macOS Big Sur 11.5.2 node v16.14.0 npm 8.3.1 textlintのインストールと設定 執筆するファイルを保存するディレクトリを作成して、そこで作業をしました。 参考にしたのはこちらtextlint と VS Code で始める文章校正です。 npm init -y npm install --save-dev \ textlint \ textlint-rule-preset-ja-spacing \ textlint-rule-preset-ja-technical-writing \ textlint-rule-spellcheck-tech-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VSCode Neovim - Visual Studio Marketplace
GitHub - absszero/vscode-laravel-goto: Go to various Laravel files