Frontend хөгжүүлэлтийн тохиргоо. (Frontend development configuration)

README.md

Eslint

Typescript төсөлд eslint ашиглаж өөрсдийн хэв маягт тааруулж rule тохируулах боломжтой.

Typescript-eslint сан суулгах.

yarn add -D @typescript-eslint/eslint-plugin

Example (.eslintrc.cjs)

module.exports = {
	plugins: ['@typescript-eslint'],
	extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended', 'eslint:recommended', 'prettier'],
	rules: {
		'no-unused-vars': 'off',
		'@typescript-eslint/no-unused-vars': 'error',
		'@typescript-eslint/no-explicit-any': 'warn',
		'@typescript-eslint/ban-types': 'error',
		'@typescript-eslint/consistent-type-definitions': 'error',
		'@typescript-eslint/consistent-type-imports': 'error',
		'@typescript-eslint/no-extra-non-null-assertion': 'error',
		'@typescript-eslint/no-empty-interface': 'error',
		'@typescript-eslint/comma-dangle': ['error', 'always-multiline'],
		'no-shadow': "off",
                '@typescript-eslint/no-shadow': "error"
		'@typescript-eslint/quotes': [
			'error',
			'single',
			{
				avoidEscape: true,
				allowTemplateLiterals: true,
			},
		],
		'newline-before-return': 'warn',
	},
};

React recommended eslint config

• eslint-plugin-react
  • react/button-has-type
  • react/prop-types
  • react/require-default-props
  • react/no-array-index-key
  • react/react-in-jsx-scope
  • react/jsx-uses-react
  • react/display-name
  • react/no-danger-with-children
  • react/jsx-no-bind
• eslint-plugin-react-hooks
• eslint-plugin-next

Editorconfig

Editorconfig нь бүх хөгжүүлэгчдийн editor нэг хэв маягийн код бичих боломжийг олгодог.

.editorconfig example

[{*.ts,*.tsx}]
charset = utf-8
insert_final_newline = true
end_of_line = lf
indent_style = space
indent_size = 2
max_line_length = 120

[{*.css,*.scss,*.pcss,*.html}]
indent_size = 2

Prettier

Prettier нь хөгжүүлэгч editorconfig ашиглаагүй кодыг өөр хэв маягаар бичсэн үед кодыг нэг хэв маяг уруу хөрвүүлнэ.

Prettier сангууд суулгах.

yarn add --dev prettier
# and
yarn add --dev eslint-config-prettier

Next.js example

{
	"tabWidth": 2,
	"printWidth": 120,
	"useTabs": false,
	"singleQuote": true,
	"trailingComma": "all",
	"semi": true,
}

.prettierignore file

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
public

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

Sveltekit example

{
	"tabWidth": 2,
	"printWidth": 120,
	"useTabs": false,
	"singleQuote": true,
	"trailingComma": "all",
	"semi": true,
	"plugins": ["prettier-plugin-svelte"],
	"pluginSearchDirs": ["."],
	"overrides": [
		{
			"files": "*.svelte",
			"options": {
				"parser": "svelte"
			}
		}
	]
}

Package.json

Төслөөс хамаарч тухайн төсөлд ашиглах node, npm хувилбаруудыг зааж өгнө.

...
"engines": {
    "npm": >=X.X.X < 1X.X.X
    "node": >=1X.X.X < 1X.X.X
}
...

*Git commit эсвэл Merge request явуулахын өмнө давхар доорх коммандыг ашиглаж шалгах (Нэмж өгөх)*

...
"scripts": {
	...
	"lint": "yarn eslint .",
	"format": "yarn prettier --write ."
	...
}
...

Сануулга: Organization-ы сан ашиглахыг зөвлөж байна. (Хувь хүний хөгжүүлсэн сан нь хаягдаж оронд өөр сан ашиглаж төслийн кодыг шинэчлэх хэрэгтэй байдаг)

Сануулга: Нэг ижил үүрэгтэй сан ашиглахгүй. (Зайлшгүй тохиолдолд ашиглана эсвэл солино)

Husky

Энэ сан git commit хийх үед автоматаар шаардлагуудыг шалгах үүрэгтэй

Git hook оруулах.

yarn husky add .husky/pre-commit "yarn tsc --noEmit && yarn lint && yarn prettier --write ."

⚠️ Prettier ажиллаж дуусахад зарим файл format хийгдэж өөрчлөгдсөн байвал дахиад format утгатай commit хийнэ. Эсвэл format хийсний дараа commit хйиж болно.

Commit msg format хийх хэсэг .husky/commig-msg гэсэн файл нэмэх.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

message="$(cat $1)"
requiredPattern="^(add|cut|fix|bump|make|start|stop|refactor|reformat|optimise|document|merge) .*$"
if ! [[ $message =~ $requiredPattern ]];
then
  echo "-"
  echo "🚨 Wrong commit message! 😕"
  echo "The commit message must have this format:"
  echo "<verb in imperative mood> <what was done>"
  echo "Allowed verbs in imperative mood: add, cut, fix, bump, make, start, stop, refactor, reformat, optimise, document, merge"
  echo "Example: add login button"
  echo "-"
  exit 1
fi

Editor plugins

Хөгжүүлэгч нь өөрийн editor-д зарим санг суулгах шаардлагатай. (Vscode example)

• Eslint
• EditorConfig (Neovim-д автоматаар асаалттай байдаг)
• Prettier

Сануулга: Хөгжүүлэгч код бичих нөхцөлийг сайжруулах өөрийн хүүсэн plugin ашиглах боломжтой. (Төслийн хөгжүүлэлтийн тохиргоотой харшилж байвал унтраах эсвэл ашиглахгүй байх)