小包スタート-反応、SSS、eslint、airbnb、stylelint、プリティ

git clone https://github.com/devastion/parcel-start-react <project_name>

npm install && npm start

こんにちは!この記事では、詳細に新しいプロジェクトのためのmy parcelスタートボイラープレートを共有し、説明したい.私の目標は、どのようにeverythings仕事を理解することです.始めましょう!

パッケージ

小包-ゼロ設定バンドル

小包は簡単です.Hereあなたのニーズのためのより多くの小包CLIパラメータを見つけることができます.私は、時々私があなたに若干の使用を示します.

--public-url // path prefix for absolute urls
--no-source-maps // disables sourcemaps

// Specific to parcel build
--no-optimize // disables minification
--no-content-has // disables hashing of output file names

# fire parcel
npm start

# build for the deployment
npm run build

# delete dist and .parcel-cache folders
npm run clean

エススリン・JS / JSX

// Included packages
eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import
eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

最も人気のあるJSリンターは、追加の設定を使用してきれいに統合する.また、Eslintrcで追加の2つのルールを追加しました.JSONファイル.

"rules": {
    // no need to import react
    "react/react-in-jsx-scope": "off",
    // use jsx extension
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  }

以下はeslintを実行するCLIスクリプトです.

# check which files contain error
npm run eslint

# fix the errors
npm run eslint:fix

CSSリンタ

// Included packages
stylelint stylelint-config-prettier-scss stylelint-config-standard-scss
stylelint-scss

ここで唯一の追加は、SCSSの互換性です.ここでは、stylelintを実行するスクリプトです.

# run without fix
npm run csslint

# fix scss files
npm run csslint:fix

コードフォーマッタ

コードを一貫してフォーマットします.Styleintとeslintと統合.

# run prettier
npm run prettier

残りのパッケージ

autoprefixer - CSSのベンダープレフィックスのキャレスを取る.
postcss-import -ローカルファイル、ノードモジュールまたはWebCountモジュールを消費します.nodeoundモジュールへの絶対パスを指定する必要はありません.
rimraf - NODMのためのRM - RF.

追加パッケージ

のためのCSSリセット.単に“SASS RESET”のJavascriptファイルまたは“~ sass reset”scssファイルにインポートします.

npm i sass-reset

複数のスクリプト並列またはシーケンシャルを実行するための

npm i npm-run-all

サースリセット ありがとう！

お読みありがとうございます.
npm-run-all