மீண்டும் வணக்கம். தொடர்பில் . இன்று நான் உங்களுடன் எனது தலைவலிகளில் ஒன்றைப் பகிர்ந்து கொள்கிறேன், அதாவது, கோண பயன்பாட்டின் உதாரணத்தைப் பயன்படுத்தி பல மல்டி-லெவல் புரோகிராமர்களால் ஒரு திட்டம் எழுதப்பட்டால் என்ன செய்வது.
நீண்ட காலமாக நான் எனது குழுவுடன் மட்டுமே பணிபுரிந்தேன், அங்கு வடிவமைப்பு, கருத்து, உள்தள்ளல் போன்ற விதிகளை நாங்கள் நீண்ட காலமாக ஒப்புக்கொண்டோம். அவர்களுடன் பழகி, அன்பாகவும் மகிழ்ச்சியாகவும் வாழ்ந்தார்கள். கொண்டாட, நான் கூட ஹப்ரில் ஒரு கட்டுரையை வெளியிட்டேன் . எனவே, ஏதோ ஒரு மாயாஜாலத்திற்காக, நாங்கள் முன்கூட்டிய ஒப்பந்தத்தில் மட்டுமே tslint ஐப் பயன்படுத்தினோம்.
பின்னர் நாங்கள் வளர்ந்தோம். மரபுக் குறியீட்டுடன் ஒரு புதிய திட்டம் தோன்றியுள்ளது, மேலும் 4 நல்ல கூட்டாளிகளின் தொகையில் புதிய டெவலப்பர்கள். பின்னர் திட்டமிட்டபடி விஷயங்கள் நடக்கவில்லை.
மரபுக் குறியீட்டுடன் வேலை செய்வது வேடிக்கையாக இல்லை என்பது பலருக்குத் தெரியும் என்று நினைக்கிறேன். என் நினைவாக, நான் மகிழ்ச்சியடைந்த ஒரே ஒரு திட்டத்தை மட்டுமே பெற்றேன், மீதமுள்ளவை ... எனவே நான் எதைப் பற்றி பேசுகிறேன்?) ஆமாம்.
வெளிப்படையாகச் சொன்னால், திட்டத்தில் உள்ள கட்டிடக்கலை விரும்பத்தக்கதாக உள்ளது, மேலும் நாங்கள் கருத்துகள் மற்றும் தட்டச்சுகளை மட்டுமே கனவு கண்டோம். ஒரு கட்டத்தில், நான் மனச்சோர்வடைந்தேன், ஏனெனில் வடிவமைப்பு விதிகளின்படி எங்கள் ஆவணம் வேலை செய்யவில்லை, கருத்துகள் எழுதப்படவில்லை, இது என்ன?). இதற்கு ஏதாவது செய்ய வேண்டியிருந்தது.
ஒரே நேரத்தில் அனைத்து படிகளையும் கற்றுக்கொள்ள காத்திருக்க முடியாதவர்களுக்கு:
நாங்கள் tslint ஐ மென்மையான விதிகள் (முன்-கமிட்டிற்கு) மற்றும் கடினமான விதிகள் (ஐடிக்கு, டெவலப்பர்கள் என்ன செய்ய மறந்துவிட்டார்கள் என்பதை உங்களுக்கு நினைவூட்டுவதற்காக)
கடினமான tslint முதல் முன்-கமிட் வரை சாத்தியமான விதிகளின் தானாக சரிசெய்தல் சேர்க்கப்பட்டது
அழகுக்கான விதிகளை எழுதினார்
பஞ்சு-மேடையுடன் ng lint ஐ அறிமுகப்படுத்த நாங்கள் ஒரு டம்ளருடன் நடனமாடினோம்
படி ஒன்று - பிரித்து வெற்றி
லிண்டரின் விதிகளை இறுக்கமாக்க வேண்டும் என்ற எண்ணம் எனக்கு வந்தபோது, நாம் தூக்கிலிடுவோம் என்று நினைத்தேன். குறியீடு மரபு. நீங்கள் அதை புரிந்து கொள்ள வேண்டும், ஆனால் அத்தகைய தொகுதியில் நீங்கள் உங்களை அடக்கம் செய்யலாம். ஐடிக்கு இரண்டாவது லிண்டரை உருவாக்க முடிவு செய்யப்பட்டது, இது ஒரு கண்பார்வை மற்றும் முறைகள் மற்றும் பண்புகள், இடைமுகங்கள் அல்லது துரதிர்ஷ்டவசமான onPush போன்றவற்றுக்கு jsdoc எழுத உங்களை கட்டாயப்படுத்தும்.
எனவே ரூட்டில் 2 tslin கோப்புகளை வைத்திருக்க ஆரம்பித்தோம்:
tsconfig.json
{
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules": {
"arrow-return-shorthand": true,
"callable-types": true,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"deprecation": {
"severity": "warn"
},
"eofline": true,
"forin": true,
"import-blacklist": [
true,
"rxjs/Rx"
],
"import-spacing": true,
"indent": [
true,
"spaces"
],
"interface-over-type-literal": true,
"label-position": true,
"max-line-length": [
true,
200
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-arg": true,
"no-bitwise": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-super": true,
"no-empty": false,
"no-empty-interface": true,
"no-eval": true,
"no-inferrable-types": [
false,
"ignore-params"
],
"no-duplicate-imports": true,
"no-misused-new": true,
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-shadowed-variable": false,
"no-string-literal": false,
"no-string-throw": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": [
true,
"ignore-comments",
"ignore-jsdoc"
],
"no-unnecessary-initializer": true,
"no-unused-expression": true,
"no-use-before-declare": false,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"prefer-const": true,
"quotemark": [
true,
"single"
],
"radix": false,
"semicolon": [
true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"unified-signatures": true,
"variable-name": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
],
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"no-output-on-prefix": false,
"no-inputs-metadata-property": true,
"no-outputs-metadata-property": true,
"no-host-metadata-property": true,
"no-input-rename": false,
"no-output-rename": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true,
"no-consecutive-blank-lines": true
}
}tslint.ide_only.json
{
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules": {
"completed-docs": [
true,
{
"properties": true,
"methods": true
}
],
"no-angle-bracket-type-assertion": true,
"no-any": true,
"prefer-output-readonly": true,
"prefer-on-push-component-change-detection": true,
"array-type": [
true,
"array"
],
"typedef": [
true,
"call-signature",
"arrow-call-signature"
],
"arrow-return-shorthand": true,
"callable-types": true,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"deprecation": {
"severity": "warn"
},
"eofline": true,
"forin": true,
"import-blacklist": [
true,
"rxjs/Rx"
],
"import-spacing": true,
"indent": [
true,
"spaces"
],
"interface-over-type-literal": true,
"label-position": true,
"max-line-length": [
true,
200
],
"member-access": [
true,
"check-parameter-property",
"check-accessor"
],
"member-ordering": [
true,
{
"order": [
"public-static-field",
"protected-static-field",
"private-static-field",
"public-instance-field",
"protected-instance-field",
"private-instance-field",
"constructor",
"public-static-method",
"protected-static-method",
"private-static-method",
"public-instance-method",
"protected-instance-method",
"private-instance-method"
]
}
],
"no-arg": true,
"no-bitwise": true,
"no-console": true,
"no-construct": true,
"no-debugger": true,
"no-duplicate-super": true,
"no-empty": false,
"no-empty-interface": true,
"no-duplicate-switch-case": true,
"no-eval": true,
"no-inferrable-types": [
false,
"ignore-params"
],
"no-duplicate-imports": true,
"one-variable-per-declaration": true,
"no-misused-new": true,
"no-non-null-assertion": true,
"prefer-template": [
true,
"allow-single-concat"
],
"ordered-imports": true,
"no-redundant-jsdoc": true,
"no-shadowed-variable": false,
"no-string-literal": false,
"no-string-throw": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": [
true,
"ignore-comments",
"ignore-jsdoc"
],
"ban": [
true,
{
"name": [
"Object",
"assign"
],
"message": "Используйте cloneDeep (lodash) для копирования объекта"
}
],
"max-classes-per-file": [
true,
1
],
"cyclomatic-complexity": [
true,
6
],
"static-this": true,
"no-unnecessary-initializer": true,
"no-unused-expression": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"prefer-const": true,
"quotemark": [
true,
"single"
],
"radix": false,
"semicolon": [
true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"unified-signatures": true,
"variable-name": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
],
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"no-output-on-prefix": false,
"no-inputs-metadata-property": true,
"no-outputs-metadata-property": true,
"no-host-metadata-property": true,
"no-input-rename": false,
"no-output-rename": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true,
"no-consecutive-blank-lines": true
}
}கோப்பில் src/tslint நிலையான tslint ஐ ஐடியுடன் மாற்றினோம்
src/tslint.json
{
"extends": "../tslint.ide_only.json",
"rules": {
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
}
}மற்றும் எங்கள் லிண்டரின் வெளியீட்டை pack.json ஸ்கிரிப்ட்களில் சரிசெய்தேன்
ng lint --tslint-config ./tslint.json --fix`அதன் பிறகு சரி செய்ய வேண்டிய விஷயங்களை வலியுறுத்துவதில் இருந்து தொங்க ஆரம்பித்தோம்.
படி இரண்டு - இரண்டு விஷயங்களை சரிசெய்யவும்
tslint உடன் விதிகள் உள்ளன has fixer. எனவே அதைப் பயன்படுத்துவோம்.
tslint --project tslint.ide_only.json --fix --forceகிடைக்கக்கூடிய அளவுருக்களின் தானாக சரிசெய்தலுடன் கடினமான லிண்டர் விதிகளை இங்கே இயக்குகிறோம், மேலும் பிழைகளைத் திரும்பப் பெற வேண்டாம் என்று இந்த கட்டளையைச் சொல்கிறோம் (இங்கே எங்கள் குறிக்கோள் தானாகத் திருத்தம் செய்வதாகும்).
படி மூன்று - அழகாக எழுதுங்கள்
ஒவ்வொருவரும் அவரவர் வழியில் எழுதும்போது, அது கடைசியில் சலிப்பை ஏற்படுத்துகிறது. ஒரு நபர் அதைச் செய்வது போல் தோன்றும் வகையில் குறியீடு எழுதப்பட வேண்டும். இதைச் செய்ய, நான் பின்வரும் அமைப்புகளுடன் அழகாக நிறுவினேன்:
.prettierr.yaml
printWidth: 200 # Максимальное кол-во символов в строке
tabWidth: 2 # Пробелов в Табе
singleQuote: true # Использовать одинарные кавычки
trailingComma: all # Использовать запятые где возможно
arrowParens: always # Стрелочные ф-ии выглядят (x) => x
overrides:
- files: "*.ts" # Проверка файлов *.ts
options:
parser: typescript # Язык в файлах *.tsமற்றும் கட்டளையைச் சேர்த்தது: prettier --write --config .prettierr.yaml
படி நான்கு - இதையெல்லாம் எப்படி தொடங்கப் போகிறீர்கள்?
இதையெல்லாம் எவ்வாறு தொடங்குவது என்பதை இப்போது விரிவாகப் பார்ப்போம். இது வேலை செய்ய, பின்வரும் லிப்களை நாம் பதிவிறக்க வேண்டும்:
npm i -D prettier lint-staged huskyஹஸ்கியைப் பயன்படுத்தி, எங்கள் கட்டளைகளின் துவக்கத்தை கிட் ஹூக்கில் தொங்கவிடுவோம் - முன்-கமிட். lint-staged மாற்றப்பட்ட கோப்புகளைப் பொறுத்து எங்களுக்காக கட்டளைகளை இயக்கும் (இந்த கோப்புகளை எங்கள் கட்டளைகளில் மாற்றவும்).
நான் சந்தித்த சிக்கலை உடனடியாக கோடிட்டுக் காட்ட விரும்புகிறேன். எங்கள் திட்டத்தில் நாங்கள் ng lint ஐப் பயன்படுத்துகிறோம். நாம் அதை லிண்ட்-ஸ்டேஜ் உடன் இணைந்து பயன்படுத்தும் போது, மாற்றியமைக்கப்பட்ட கோப்புகள் நமது கட்டளையில் சேர்க்கப்படும். ng lint-ல் இதற்கான சாவி உள்ளது --files, ஆனால், நான் புரிந்து கொண்டபடி, அவர் பல கோப்புகளைப் பார்க்கவில்லை, மேலும் அவர் ஒவ்வொரு கோப்பிலும் இந்த விசையைச் சேர்க்க வேண்டும். இதைச் செய்ய, நான் ஒரு கோப்பை உருவாக்க வேண்டும்:
lint.sh
#!/bin/bash
PROJECT=$1
shift
SOURCES=$@
DESTINATIONS=""
DELIMITER=""
for src in $SOURCES
do
DELIMITER=" --files "
DESTINATIONS="$DESTINATIONS$DELIMITER${src}"
done
ng lint $PROJECT --tslint-config ./tslint.json $DESTINATIONSஇந்தக் கோப்பை இயக்க, நாம் திட்டப் பெயரை அனுப்ப வேண்டும். இது கோப்பில் உள்ளது angular.json திட்ட சொத்தில். என் விஷயத்தில் அது partner-account и partner-account-e2e. எனக்கு 1வது தேவை.
அமைப்புகளுக்குச் செல்வோம். எங்கள் package.json இப்போது இப்படி இருக்கிறது:
"husky": {
"hooks": {
"pre-commit": "lint-staged --relative"
}
},
"lint-staged": {
"*.{ts,js}": [
"prettier --write --config .prettierr.yaml",
"tslint --project tslint.ide_only.json --fix --force",
"sh lint.sh partner-account",
"git add"
],
"*.{html,scss,css}": [
"prettier --write --config .prettierr.yaml",
"git add"
]
},கவனம் செலுத்துங்கள் lint-staged --relative. அளவுரு --relative அங்கு தேவை. இப்போது, நாம் உறுதியளிக்கும்போது, அது தொடங்குகிறது lint-staged. அவர், கோப்புகளைத் தேர்ந்தெடுத்து, அவற்றைப் பொறுத்து கட்டளைகளின் பட்டியலை இயக்குகிறார்.
துரதிருஷ்டவசமாக, இது குறியீடு மதிப்பாய்வை ரத்து செய்யாது, ஆனால் அது மிகவும் தூய்மையானது. அணுகல் மாற்றிகள், முறைகள் மற்றும் பண்புகளின் விளக்கங்கள் பற்றி டெவலப்பர்களுக்கு குறைவாகவே நினைவூட்டத் தொடங்கினேன், மேலும் அவர்களின் பணி அதே பாணியில் எழுதத் தொடங்கியது (சரி, கிட்டத்தட்ட 😀).
PS - எங்கள் பிரதமருக்கு படங்களுக்கு நன்றி.
ஆதாரம்: www.habr.com
