Volar 1.0 "Nika" Released! | The Vue Point
We are happy to announce that we have released v1.0 of Volar, the official IDE/TS tooling support for Vue! 🎉 This major version ships with tons of improvements across the board. In addition to improving UX, performance, and package size, we also released Plugin API v1 and refactored the core code to be framework-agnostic. 注：結尾附有中文版本 (There is Chinese version of this post at the end)。 Earlier this
Neovimでのフロントエンド開発環境 2021
最近はフロントエンドエンジニア(主にReact)をしているYano (@yuki_ycino) といいます。 この記事では自分が開発に使っているNeovim周りの環境と、その大まかな構成について書いていきます。 追記 後日、自分がNeovimでフロントエンド開発を行っている理由とVSCode という記事を書きました。 合わせて読んでいただけると幸いです。 はじめに 自分は現在フロントエンド開発のほぼ全てをNeovimで行っています。 個人的にはVSCodeと遜色なく(むしろ効率よく)開発できていると思うのですが、VSCodeではシンプルな設定で開発を始められるのに対し、Vimはどうしても設定のハードルが高いです。 具体的には現在5000行弱のVimの設定ファイルと100個前後のプラグインを導入して開発しています。 ただ、それを他の方に勧めるのは無茶なので、この記事ではほぼ最小構成に近いTy
無人島に持っていく(Neo)vimプラグイン10選 (TS開発環境編)
概要 自分は普段Neovimを使って(主にTypeScriptでの)開発を行っています。 NeovimでのTypeScript開発は環境を整えればVSCodeと遜色ない開発体験を得ることができると思っています。 また、Vimの操作に慣れれば一部の編集機能についてはVimの方が優れていると感じています。 この記事では自分の開発に欠かせないプラグイン10個を紹介しようと思います。 プラグイン10選 VimをIDE化するプラグイン coc.nvim 様々な操作の起点に使うFuzzy Finder fzf-preview.vim 高機能なファイラ fern.vim Vim上でGitを操作する gina.vim テキストを囲う操作を可能にする vim-sandwich 文字の入力を自動で展開する lexima.vim Snippetプラグイン UltiSnips 一括置換を行う vim-qfrepl
eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル（モジュール）の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select
サードパーティスクリプトの極限環境向け Svelte
この記事は、 Svelte Advent Calendar 2020 - Qiita の 22 日目です。 昨今では、フロントエンドの JS を減らす圧が強くなってきています。とくに来年 4 月に導入される Core WebVital は SEO に関わるため、 マーケティング文脈でもフロントエンドの改善施策として、パフォーマンスを上げる圧が強くなっています。 Google の UX 指標「Core Web Vitals（コアウェブバイタル）」とは？LCP・FID・CLS を解説｜ ferret JavaScript よ。文明を捨て、自然に還れ。 ::ハブろぐ で、ユーザー体験を遅くするものとしてやり玉に上げられるのが、サードパーティスクリプトという、サイト外から読み込まれる第三者の script です。代表的なものが Google Tag Manager や Twitter や Face
ESLint と Prettier の共存設定とその根拠について
注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので
Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る - おじんブログ
動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようとしたら難しいという先入観を抱いたので、できるだけシンプルに、一歩一歩づつ入門する。 最終的に、React + TypeScript の環境を作れるようにする。 リポジトリ 各ステップごとにコミットしているので逐次さかのぼってください。 github.com 前提 最低限の yarn または npm コマンドの使い方がわかること。 npx create-react-app で React プロジェクトを作成した事があること。 ※VSCode 使用を前提としています。 Config なしで実行する 最低限の構成で Webpack が何をするのか理解する。 準備 # run at project
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
Grid.js - Advanced JavaScript table plugin
Grid.js Advanced Table PluginGrid.js is a Free and open-source JavaScript table plugin. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs.
Flow/PostCSS の大規模プロジェクトを TypeScript/emotion に移行して数万行のプルリクを投げた話 - JX通信社エンジニアブログ
JX通信社CDOの小笠原(@yamitzky)です。 AI 緊急情報サービスの「FASTALERT」は、報道機関や公共機関に導入いただいている(お堅めな) BtoB SaaS でありながら、 事業開始当初から React を使った Single Page Application(SPA) として作っています。 2017年には、より信頼性のあるフロントエンドを提供するため、 Facebook の Flow を導入しました。しかし、昨今の TypeScript の盛り上がりや、社内の他プロダクトで TypeScript を使っていることなどを受けて、フロントエンドのアーキテクチャを大幅に見直しました。 今回取り組んだ大きな変更は、 Flow から TypeScript への移行 (型チェックの移行) TypeScript 化に合わせた、 babel-plugin-proposal-*** の廃
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - nicoespeon/abracadabra: Automated refactorings for VS Code (JS & TS) ✨ It's magic ✨