π₯ ΠΠ°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ SPA-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
Developer style guide - Π½Π°ΡΠΈ Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠ΅Π½Π½ΠΎΡΡΠΈ ΠΏΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΊΠΎΠ΄Π°
Π§ΡΠΎΠ±Ρ eslint ΡΠ°Π±ΠΎΡΠ°Π» ΠΊΠ°ΠΊ ΡΡΠ»ΠΎΠ²Π½ΡΠΉ ΡΠΎΡΠΌΠ°ΡΠΎΡ Π°Π»Ρ prettier, Π½ΡΠΆΠ½ΠΎ ΡΡΠΎΠ±Ρ IDE ΠΏΠΎΡΠ»Π΅ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΡ ΡΠ°ΠΉΠ»Π° Π·Π°ΠΏΡΡΠΊΠ°Π»Π° ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π΄Π»Ρ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ
ΠΏΡΠ°Π²ΠΈΠ»
ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ΅ΠΌΡ Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½ prettier: https://antfu.me/posts/why-not-prettier
Π Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠ°ΠΊΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ:
{
773D
// Disable the default formatter, use eslint instead
"prettier.enable": false,
"editor.formatOnSave": false,
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
}Π Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠ°ΠΊΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ:
{
"tab_size": 2,
"show_whitespaces": "all",
"formatter": {
"code_actions": {
"source.fixAll.eslint": true
}
}
}Π WebStorm Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ°Π·Π΄Π΅Π» Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ, ΡΠΊΠ°Π·Π°ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ: Preferences β Languages & Frameworks β JavaScript β Code Quality Tools β ESLint.
ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ:
| ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
|---|---|
| Vue - Official | ΠΠΊΡΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΠΌΠΎΡΠ½ΠΈΠΊ Π² ΡΠ°Π±ΠΎΡΠ΅ Ρ Vue3 |
| EditorConfig | ΠΠΎΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΏΠΎ Π½ΡΠΆΠ½ΡΡ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΡ |
| ESLint | ΠΠΎΠΌΠΎΡΠ½ΠΈΠΊ Π² Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ ΠΊΠΎΠ΄Π° Π² Π΅Π΄ΠΈΠ½ΠΎΠΌ ΡΡΠΈΠ»Π΅ |
| UnoCSS | ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΏΡΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² |
ΠΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅:
| ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
|---|---|
| change-case | ΠΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° |
| Code Spell Checker + Russian Pack | ΠΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΠ° Π² IDE |