VSCodeでプロジェクト単位の拡張機能を設定する - Qiita
リポジトリごとに拡張機能を共通化したい時ってあると思います。 その時の設定を残しておきたいと思います TL;DR vscodeのワークスペースを使用する(限定的にする) vscodeを使用しているチームにおすすめ ※今回はPrettierを例にしていますが、 拡張機能を共通化（.vscode/extensions.json） リポジトリでVSCodeの挙動を共通化(.vscode/settings.json) が目的であれば一読の余地ありかと！ 対象読者 vscode v1.52.1以上 チームでvscodeを使用している 背景 例えば、チームでPrettierを既存のプロジェクトに導入していくのが決まったとして、大体Prettierを入れる目的って、フォーマッター使用してレビュー負担を減らしたいだったりすると思います そうであれば、Prettierを発動させるベストなタイミングは プロジ
【prettier】htmlWhitespaceSensitivityのignore/css/strictはどれ?
htmlWhitespaceSensitivityのignoreやstrict templete内のhtmlの改行がいやで少し設定をいじりました。ホワイトスペースをどう扱うかに付随して改行も変わってしまうようです。 rules: { 'prettier/prettier': [ 'error', { // htmlタグの改行方針 // htmlWhitespaceSensitivity: 'ignore' htmlWhitespaceSensitivity: 'css' // htmlWhitespaceSensitivity: 'strict' } ], } 公式サイトをみると、 whitespace is significant in inline elements. と書かれています。ホワイトスペースはインライン要素で重要とありますが、レイアウトに関わるからでしょう。改行を綺麗に入れ
stylelintの設定ファイル
stylelint.config.js �� ] V `��\ V module.exports = { plugins: ['stylelint-order', 'stylelint-scss'], rules: { indentation: 2, 'color-hex-case': 'lower', // hex値は小文字指定（大文字を禁止） 'color-hex-length': 'short', // hex値は短い表記（冗長な表記は禁止） 'color-named': 'never', // 名前付きカラー指定を禁止 'color-no-invalid-hex': true, // 無効な16進数の色指定を禁止 'function-comma-space-after': 'always-single-line', // 単一行のカンマ後には空白が必要 'function-comm
Webフロントエンド開発(2021)の見取り図をつくりたい
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある（ありすぎると言ってもいいかもしれません）んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか？」とか、「Babelとかwebpackってインストールしなきゃいけないの？」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
Prettier + ESLint + StyleLintの連携
※ VsCode(エディターの拡張機能)と併用する際の注意点 Prettierとリンターの自動フォーマット機能の競合を防ぐ必要があるので、リンターの拡張機能(EsLint、stylelint-plus)のみ有効にする。 必要なパッケージのインストール prettier、eslint、stylelint本体と併せて、以下のパッケージをインストールする。 PrettierとESLintの連携 eslint-plugin-prettier Prettier のチェックを同時に実行 eslint-config-prettier Prettier と競合するルールを無効化 PrettierとStyleLintの連携 stylelint-prettier Prettier のチェックを同時に実行 stylelint-config-standard 一般的なCSSのコーディング規約集 stylelint
stylelintの導入とVS Codeの設定の方法 - Qiita
概要 stylelint1とはCSSのためのLintです。Lintとは「コンパイラではチェックされない、バグの要因となりそうなソースコードの記述に対し、警告を行う静的解析処理」2のことで、こうした処理によって、「コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ち」3ます。 CSSは素のままだとエラーを吐かず、どこに原因があるのかを探すのに苦労しますが、stylelintを使うことで基本的な構文エラーやスタイルの重複、タイポなどがあると、エラーを検出し、どこのファイルの何行目に問題があるのか教えてくれます。一部の書式に関する規則に対しては自動的に修正することもできます。設定できるルールは170以上あり、柔軟にカスタマイズできます4。また、GitHub5などでも使われ、CSSだけではなく、SCSSやSass、Reactのstyled c
Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
お知らせ（2021/05/26 追記） 以前はeslint --fixなどで ESLint を実行時に Prettier でコードを整形し、整形したコードに対して構文チェックが実行されるようにすることが推奨されていました。 ESLint で Prettier を実行するためには、ESLint の Plugin が必要でしたが、これを利用することが公式で推奨されなくなりました（詳細はこちら）。 そのため、記事を更新して Prettier と ESLint をそれぞれ実行させるような内容に変更しました（ついでに husky のバージョンも上げており、それに関する内容も更新しています）。 更新前のコードや記事は以下にありますので、必要に応じてご確認ください。 はじめに Prettier（v.2.3.0） に関しての備忘録です。 「Prettier の何が便利なのかよくわからない」 「ESLint
stylelint + prettier + VSCodeでめっちゃ整ったCSSを描く
この記事は、 「ESLintとか使ってたけど、もしかしてCSS向けにもあるのでは...？ あるやんけ！あとはこれをESLintみたいな感じでVSCodeでいい感じに保存時にフォーマットかけられれば死角なしや！」 っていう人向けです。 環境 VSCode 1.12.2 Node.js 14.13.0 (あまり関係ないです) 導入 Nodeのセットアップ まずは、必要なパッケージをインストールしていきます。 yarn add -D stylelint prettier stylelint-prettier stylelint-config-prettier OR npm install --save-dev stylelint prettier stylelint-prettier stylelint-config-prettier これでリンターのインストールが終わりました。 次に、.sty
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stylelint "at-rule-no-unknown" ルールでエラー - Qiita
.stylelintrc - Qiita