ec0lint

ウェブサイト|構成|ルール

EC0lintは、開発プロセス中にWebサイトの二酸化炭素排出量を削減する方法に関するヒントをユーザーに提供する静的コード分析ツールです。 EC0lintによって提案されたコードの変更を適用すると、訪問ごとに炭素排出量が削減され、荷重が速く、スペース効率が高くなります。このツールはオープンソースとコミュニティ主導型です。

私たちの目標

毎日250 000以上のWebサイトが公開されていることをご存知ですか？

大多数は、重いフォントを使用し、大きすぎる/不要な画像を使用したり、冗長なライブラリを利用したりします。これらおよびその他の要因は、二酸化炭素排出量を生成します。実際、平均的なWebサイトの1つのビューは、1.8 g CO2を放出します。これは、年間216 kgのCO2を合計しています。残念ながら、現在のソリューションは、既存のWebサイトのみを最適化しています。

EC0Lintは、Webサイトの二酸化炭素排出量を緩和するFrontEnd開発者向けのツールです。それは、より気候に優しいコードを作成する方法をアドバイスするヒントを示しています。 Code OptimizationのおかげでEC0LINTは、1.8 gから〜0.2 gの1つのビューあたりのCO2排出量を毎年198 kgのCO2（-88％！）の節約に削減するのに役立ちます。

ツールはカスタマイズされており、分析中に各ルールを適用することは、エラーではなくヒントとして調整したり、ヒントとして扱われたりできます。この柔軟性により、開発者はEC0lintから中断することなく目標を達成することができ、同時に改善の可能性に注意を向けます。

始めましょう

ノードがインストールされていることを確認してください

（a）コードにCSSファイルが含まれている場合

ec0lintをダウンロード：

npm i ec0lint ec0lint-style ec0lint-style-config-recommended

プロジェクトの構成：

npm init @ec0lint/config

次のコンテンツを使用して、プロジェクトのルートで.ec0lint-stylerc.json構成ファイルを作成します。

{ "extends": "ec0lint-style-config-recommended" }

（b）コードが少ない場合、SASS/SCSSファイル

npm i ec0lint ec0lint-style ec0lint-style-config-recommended-scss

プロジェクトの構成：

npm init @ec0lint/config

次のコンテンツを使用して、プロジェクトのルートで.ec0lint-stylerc.json構成ファイルを作成します。

{ "extends": "ec0lint-style-config-recommended-scss" }

（c）コードにpostcss / tailwindが含まれている場合

npm i ec0lint ec0lint-style ec0lint-style-config-postcss

プロジェクトの構成：

npm init @ec0lint/config

次のコンテンツを使用して、プロジェクトのルートで.ec0lint-stylerc.json構成ファイルを作成します。

{ "extends": "ec0lint-style-config-postcss" }

Reactを使用する場合

Reactプラグインをインストールします（またはNPM initを使用）：

npm i ec0lint-plugin-react

.ec0lintrc.json構成ファイルに追加します：

 "extends": [
    "ec0lint:recommended",
    "plugin:react/recommended"
  ]

EC0lintを実行します

ターミナルを分割して実行します。

npx ec0lint-style "**/*.scss" npx ec0lint .

環境にやさしいウェブサイトを作りましょう！

リリース計画

✅V1.0.0- 6月-MVP

• ✅より軽いHTTP（Lighter-HTTP、EC0LINT）
• ✅フォント形式（no-ttf-font-files、ec0lintスタイル）
• ✅画像形式の検証（軽量イメージ形式、EC0lintスタイル）
• ✅光ライブラリ - Lodash（避けているロダッシュ、EC0LINT）
• ✅Lightライブラリ-DATE-FNS（NO-DATE-FNS、EC0LINT）
• ✅Lightライブラリ-moment.js（no-moment-js、ec0lint）

✅V2.0.0- 10月-CO2モジュール + Reactプラグイン

• ✅CO2計算（EC0LINT）
• ✅CO2計算（EC0lintスタイル）
• ✅プラグインの反応（EC0LINT-PLUGIN-REACT）
• ✅光ライブラリ-JQueryAjax（ajax、ec0lint）
• ライトライブラリ-JQueryAjaxイベント（Ajax-Events、EC0lint）
• font-display（require-font-display、ec0lintスタイル）

✅V2.1.0- 1月 - 20ルールの実装、15の一意のルール

• ✅画像形式（軽量イメージ形式、EC0lint）
• ✅ビデオ形式（軽量ビデオフォーマット、EC0LINT）
• ✅プラグインHTML（EC0LINT-PLUGIN-HTML）
• lazyロード（怠zy-loading、ec0lint-plugin-html）
• ✅フォントソース（ホストなしオンラインフォント、ec0lintスタイル）
• ライトライブラリ - jquery andself（and-self、ec0lint）
• ✅Lightライブラリ - jQueryアニメート（無意味、ec0lint）
• ✅光ライブラリ - jQuery attr（no-attr、ec0lint）
• ✅光ライブラリ - jQuery bind（no-bind、ec0lint）
• ✅ビデオオートプレイ（require-auto-play、ec0lint）

？ v3.0.0- 4月 - IDEプラグイン +リソーススキャン

• ☑️VSCODEプラグインEC0LINT
• ？ vscodeプラグインEC0lintスタイル
• ？ IntellijプラグインEC0LINT
• ？ IntellijプラグインEC0lintスタイル
• ？色の検証（バックグラウンドカラー検証、EC0lintスタイル）
• ？画像サイズ（画像サイズの検証、EC0lintスタイル）
• ？ビデオサイズ（ビデオサイズの検証、ec0lintスタイル）
• ☑§ライトライブラリ - jQueryボックスモデル（ボックスモデルなし、ec0lint）
• ☑§Lightライブラリ - jQueryブラウザ（ノーブラウザー、EC0LINT）

V4.0.0- 6月 - タイプスクリプトプラグイン

• 型
• ライターHTTP（Lighter-HTTP、EC0Lint-Plugin-Typescript）
• ライトライブラリ - lodash（ロダッシュ、ec0lint-plugin-typescriptを回避）
• ライトライブラリ-DATE-FNS（NO-DATE-FNS、EC0LINT-PLUGIN-TYPESCRIPT）
• ライトライブラリ-moment.js（no-moment-js、ec0lint-plugin-typescript）
• ライトライブラリ - jQuery ajax（ajax、ec0lint-plugin-typescript）
• ライトライブラリ - jQuery ajaxイベント（ajax-events ec0lint-plugin-typescript）
• ビデオ形式（軽量ビデオフォーマット、EC0LINT-PLUGIN-TYPESCRIPT）
• レイジーロード（怠zy-loading、ec0lint-plugin-typescript）
• ビデオオートプレイ（require-auto-play、ec0lint-plugin-typescript）

v5.0.0- 9月-CI/CDレポート

• CI/CDレポート
• 調査 - ユーザー追跡スクリプト
• 研究 - ダークモード
• 研究 - 新しいルール
• 新しいルール

次：

• ウェブサイトの予算
• Angularプラグイン
• Vueプラグイン
• - フックスオプション

伝説：

• ✅リリース
• ☑️実装され、まだリリースされていません
• ？進行中
• ？取るべきタスク
• 将来のリリースで行う

貢献を始める方法

貢献したい場合は、私たちに手紙を書いてコーディングを開始してください！

マークされたタスクを見ることができますか？または、問題（https://github.com/ec0lint/ec0lint/issues）でタスクを検索します。

ありがとう！

EC0lintの改善に関するコラボレーションを受け入れており、ツールに関するすべての貢献とフィードバックに非常に感謝しています。持続可能なデジタル環境を作成してくれてありがとう！

conctact：[email protected]