Frontend хөгжүүлэлтийн тохиргоо. (Frontend development configuration)
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'],
'@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
нэг хэв маягийн код бичих боломжийг олгодог.
[{*.ts,*.tsx}]
charset = utf-8
insert_final_newline = true
end_of_line = lf
indent_style = space
indent_size = 4
max_line_length = 120
[{*.css,*.scss,*.pcss,*.html}]
indent_size = 2
Энэ тохиргоо нь хөгжүүлэгч editorconfig
ашиглаагүй кодыг өөр хэв маягаар бичсэн үед кодыг нэг хэв маяг уруу хөрвүүлнэ.
Prettier
Prettier нь хөгжүүлэгч editorconfig
ашиглаагүй кодыг өөр хэв маягаар бичсэн үед кодыг нэг хэв маяг уруу хөрвүүлнэ.
Next.js example
{
"tabWidth": 4,
"printWidth": 120,
"useTabs": true,
"singleQuote": true,
"trailingComma": "all",
"semi": true,
}
Sveltekit example
{
"tabWidth": 4,
"printWidth": 120,
"useTabs": true,
"singleQuote": true,
"trailingComma": "all",
"semi": true,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}
Төслөөс хамаарч тухайн төсөлд ашиглах node
, npm
хувилбаруудыг зааж өгнө.
*Git commit
эсвэл Merge request
явуулахын өмнө давхар доорх коммандыг ашиглаж шалгах (Нэмж өгөх)*
Сануулга: 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
-д зарим санг суулгах шаардлагатай. ( Vscode
example)
- Eslint
- EditorConfig (Neovim-д автоматаар асаалттай байдаг)
- Prettier
Сануулга: Хөгжүүлэгч код бичих нөхцөлийг сайжруулах өөрийн хүүсэн plugin
ашиглах боломжтой. (Төслийн хөгжүүлэлтийн тохиргоотой харшилж байвал унтраах эсвэл ашиглахгүй байх)
Originally published at http://github.com.