静的サイトのための設定方法
ESLint - 私のコードを分析し、より良いコーディングパターンを奨励するために従う潜在的な問題とベストプラクティスを指摘するのに役立ちますPrettier - 私がコードベースのために設定したカスタム構成に基づく私のコードを自動フォーマットするのを手伝うEditorConfig - CodeBaseの一貫したスタイリングを実施するために、私のエディタをカスタマイズすることに役立ちますこれらのツールのすべての3つはいくぶん似ており、彼らは時々重複しています.これは、開発者が適切にそれらを設定する方法を知って非常に混乱させる.正直なところ、私はまだ何の設定は、特定の問題を処理するために変更するには混乱しているときは、これは私自身と他の開発者のためのリファレンスとして、このガイドを作成したときに標準的なセットアップガイドに従って静的なウェブサイトを構築する.
目次
必要条件
Before we get started, make sure you have latest version of Node.js installed along with VSCode and Terminal:
- Node.js (^12.22.0, ^14.17.0, or >=16.0.0)
- Visual Studio Code
- iTerm / Terminal
セットアッププロジェクトとNPMの初期化
プロジェクト用の新しいディレクトリを作成します
mkdir <PROJECT_NAME>
cd <PROJECT_NAME>
npm init
ハウツーとスタイル
依存関係のパッケージとしてインストールする
npm install eslint --save-dev
eslint設定ファイルの設定
npm init @eslint/config
ESLint should check syntax, report problems, and enforce a popular coding style
Let's go with JavaScript ES Modules
We won't be using any framework as we are building a simple static site
No TypeScript either, but if you want to use it, select "Yes"
Our code will only be executed on the browser
We will use a popular style guide to enforce a set of coding standards
We will go with Airbnb's style guide as it is a common choice for most open source projects
Save ESLint configuration file as a JavaScript file
Since we are using Airbnb's style guide, we'll need to install a few more dependencies
それだ!今、私たちは
.eslintrc.js プロジェクトのルートに作成されたファイル.// .eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb-base',
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
rules: {
},
};
クリエイトア
.eslintignore 特定のファイルまたはディレクトリのリンギングを無視するファイル// .eslintignore
node_modules
node_modules ここでは特に、それが我々のコードの一部でないので、それにどんなリンティングも走らせないようにEslintに伝えます.最後にセットアップをしましょう
lint パッケージ内のスクリプト.コマンドラインからエラーをチェックするJSON"scripts": {
"lint": "npx eslint ./"
},
npm run lint eslintにどんなエラーでも吐き出すよう依頼することよし、それは我々がeslintのために必要であるすべてです.さっさと行きましょう!
ハウツーとスタイル
最初に、NPMからprettierパッケージをdev依存性としてインストールします.
npm install --save-dev --save-exact prettier
.prettierrc.json ルートレベルのファイル{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
さて、インストールPrettier - Code formatter vscodeの拡張.eslint拡張子と同様に、この1つはまた、非常に便利です.なぜ?それは自動的にそれを変更するようにコードをフォーマットするので!
保存時にコードをフォーマットするためにvscodeを設定しましょう.
On VSCode, go over to
Settingsfrom the bottom left corner
Then, type in
formaton the search setting input (up top)
Editor: Default Formatter => Prettier - Code formatterEditor: Format On Paste チェックボックスをチェックEditor: Format On Save チェックボックスをチェック.prettierignore 特定のファイルまたはディレクトリの自動フォーマットを無視するファイル// .prettierignore
node_modules
format スクリプトpackage.json コマンドラインからすべてのプロジェクトファイルを自動フォーマットするには、次の手順に従います."scripts": {
"format": "npx prettier --write ."
},
npm run format プロジェクト全体ディレクトリ内のすべてのファイルを自動でフォーマットするように指示します.Important!
Let's pause for a bit... our Prettier configuration is now all set and should be working, but there is a hidden problem. ESLint comes with a few default formatting rules out of the box that may collide with Prettier formatting rules. So, to get around it, we need to override those specific ESLint rules in favor of Prettier because Prettier deals with all formatting rules.
前に行って、きれいなオーバーライドを実行しましょう.
インストール
eslint-config-prettier NPMからのパッケージnpm install eslint-config-prettier --save-dev
extends アレイ内部.eslintrc.js ファイル.extends: ['airbnb-base', 'prettier'],
編集
ほとんどのコード整形の面倒を見ている間、EditorConfigは開発者のエディタに追加の制限を適用できます.場合によっては、pretconfig設定を使用して、コードを自動でフォーマットすることもできます.
.prettierrc ファイルが提供されず、( 2 )きれいなvscode拡張モジュールが既にインストールされています.を作成しましょう
.editorconfig プロジェクトのルートレベルのファイル:root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = tab
indent_size = 2
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
ハスキーとコミットのオートリントとフォーマット
ハスキーは、我々がgitフックの上で特定の行動を統合するのを可能にするすばらしいツールです.これは、私たちのために私たちのコードをリンギングし、書式設定に来ることができます.開発者として、我々はできるだけ多くの我々の繰り返された行動を自動化しようとします.ここで、オートリントを試み、コードをコミットします.
まず、依存関係としてNPMからHuskyをインストールします.
npm install husky --save-dev
git init
npx husky install
npx husky add .husky/pre-commit "npm run lint && npm run format && git add ."
git add .husky/pre-commit
npm run lint and npm run format 前コミットアクションとして.これは、すべてのコードがリンクされ、ソースコントロールにコミットされる前に書式設定されます.私が去る前に、若干のもの...
Reference
この問題について(静的サイトのための設定方法), 我々は、より多くの情報をここで見つけました https://dev.to/npranto/how-i-setup-eslint-prettier-and-editorconfig-for-static-sites-33epテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol