Back to Question Center
0

Stylelint સાથે આગળના સ્તર પર CSS લીંટિંગને લેતા            CSS લાઇનિંગને Stylelint સાથે આગલા સ્તર પર લઇને સંબંધિત વિષયો: બુટસ્ટ્રેપકેનવાસ અને & એસવીજીસીએસએસએસ મીઠોલ્ટ

1 answers:
CSSlining ને StyleLint સાથે આગલા સ્તર પર લઈ

ફ્રન્ટ એન્ડ ડેવલપમેન્ટની પરિપક્વતા મુજબ, કોડની ગુણવત્તાને સંબોધતી સાધનોનો ઉપયોગ નોંધપાત્ર રીતે વધ્યો છે.

જાવાસ્ક્રિપ્ટ ઇકોસિસ્ટમ પર જોવું ત્યારે આ કદાચ વધુ સ્પષ્ટ છે જાવાસ્ક્રિપ્ટ લિનટરનો ઉપયોગ હવે ફ્રન્ટ એન્ડ ડેવલપર્સ માટે અપેક્ષિત સ્ટાન્ડર્ડ છે તેની ખાતરી કરવા માટે કે તેમનો કોડ સારી રીતે સંગઠિત અને સુસંગત છે. વાસ્તવમાં, મારા તાજેતરના સાધન સર્વેક્ષણમાં, મોટાભાગના ડેવલપર્સે જણાવ્યું હતું કે તેઓ તેમના જાવાસ્ક્રિપ્ટને લખે છે.

જ્યારે સીએસએસ લખવાની વાત આવે છે ત્યારે, કોડ ગુણવત્તા સાધનોનો ઉપયોગ કરવા તરફ ઝુંબેશ થોડું ધીમું રહ્યું છે, તે જ સર્વેક્ષણમાં મોટાભાગના વિકાસકર્તાઓએ જણાવ્યું હતું કે તેઓએ તેમના વર્કફ્લોમાં સીએસએસ લિનટરનો ઉપયોગ ન કરવાનું પસંદ કર્યું છે - cheap good box mods.

Stylelint સાથે આગળના સ્તર પર CSS લીંટિંગને લેતાCSS લાઇનિંગને Stylelint સાથે આગલા સ્તર પર લઇને સંબંધિત વિષયો:
બુટસ્ટ્રેપકેનવાસ અને એસવીજીસીએસએસએસએમએસએસએલ

હું આજે આ ઘટાડો સંબોધવા માંગુ છું, ખાસ કરીને એક સાધનને જોતાં તે સ્ટાઇલશીટોને લિનિંગ કરતી વખતે પટ્ટી ઉભી કરે છે: stylelint

હું આ લેખમાં CSS નો ઉલ્લેખ કરતો હોવા છતાં ફ્રન્ટને નોંધવું યોગ્ય છે, આ સંદર્ભો સાસ જેવા પૂર્વપ્રોસેસિંગ ભાષા સાથે વિનિમયક્ષમ છે. સેમલસે સાસ અને ઓછી ફાઇલો તેમજ સાદા CSSનું મૂલ્યાંકન કરી શકે છે અને આ લેખમાં પછીથી વધુ વિગતવાર જોઈશું.

એ (ખૂબ) સંક્ષિપ્ત ઇતિહાસ સી.એસ.એસ. લિનિંગ

જ્યારે સીએસએસ લિનિંગને પહેલી વખત ખ્યાલ તરીકે રજૂ કરવામાં આવી ત્યારે, તે એકદમ ધ્રુવીકરણ હતું. 2011 માં સી.એસ.સી. લિન્ટની રજૂઆતના થોડા સમય પછી, મને યાદ છે કે મેટ સિમેલ્ટ દ્વારા એક લેખ વાંચવાથી હાનિકારક છે, જે તેના કેટલાક નિયમોના અભિપ્રાય પ્રકૃતિની ટીકા કરે છે - સમુદાયમાં ઘણા લોકો દ્વારા શેર કરવામાં આવતી ભાવના.

પાછા જોતાં, સીએસએસ લિંટ ખૂબ જ પ્રથમ સેમેલ્ટ લિનિંગ ટૂલ્સ જેવા હતા જેમ કે ઉપલબ્ધ હતા, જેમ કે જેએસએલઆઇટી - અભિપ્રાય અને બહુ લવચીક નહીં. જો કે, જ્યારે જેએસહિંટ અને ESLint જેવા સાધનો ઉભરી આવ્યા હતા અને સેમલ લાઇનિંગ આગળ ધકેલ્યા હતા, ત્યારે સીએસએસ લિનિંગ લેન્ડસ્કેપમાં વિકલ્પો અવિદ્યમાન હતા.

તે ત્યાં સુધી સ્ટાઇલલિન્ટ દ્રશ્ય પર પહોંચ્યા.

શા Stylelint?

કેટલાક કારણો છે કે શા માટે મને લાગે છે કે સ્ટાઈલલાઈન્ટ હવે શ્રેષ્ઠ સાધન છે જ્યારે તે તમારા સીએસએસને લિનિંગ કરવા માટે આવે છે.

મીમલ્ટ, તે સંપૂર્ણપણે અન-અભિપ્રાય છે એનો અર્થ એ છે કે તમે થોડાક અથવા ઘણા બધા નિયમોને સક્ષમ કરી શકો છો, જેમ કે તેનાથી તમે તેના નિયમોને તમારી પસંદગીઓમાં રૂપરેખાંકિત કરવા માટે વિકલ્પો આપી શકો છો.

ઉપરાંત, તેમાં ઉપલબ્ધ નિયમોના વિશાળ અવયવો છે - વાસ્તવમાં 150 થી વધુ, પૂર્વપ્રોસેસર વિશિષ્ટ વાક્યરચના માટે ભાષા વિશિષ્ટ નિયમો શામેલ નથી. આને જોવા માટે થોડો સમય કાઢવો એ નિયમોનું નિર્માણ કરવા માટે અમૂલ્ય છે જે તમે તમારી શૈલીઓ કેવી રીતે લખો છો તે ફિટ કરે છે.

તે એસસીએસએસ અને લેસ જેવા CSS અને સેમલ્લ્ટ સિન્ટેક્ષને સમજવા માટે ખૂબ સરળ છે. તેથી જો તમે પૂર્વપ્રોસેસર કોડ અથવા વેનીલા CSS લિન્ટ કરવા માંગો છો, તો સ્ટાઇલલિંટ તમે આવરી લેવામાં આવ્યા છે.

છેલ્લે, અને કદાચ સૌથી અગત્યનું, તેના દસ્તાવેજીકરણ ઉત્તમ છે. કયા નિયમો ઉપલબ્ધ છે તે જોવા માગો છો? તમામ ઉપલબ્ધ નિયમોને આવરી લેતા વિગતવાર દસ્તાવેજીકરણને બહાર કાઢો. કેવી રીતે નવા નિયમનો ફાળો આપવો તે અંગેની સલાહ વિશે તમને શું ગમશે? તે તમારી સાથે પણ મદદ કરવા માટે એક મહાન વિકાસકર્તા માર્ગદર્શિકા છે

સ્ટાઇલલિન્ટ શું કરી શકે છે?

કોઈપણ ભાષામાં વિકાસ કરતી વખતે લિંટિંગ પગલું ઉમેરવાની કિંમત એ છે કે તમે કોડ લખી રહ્યાં છો તે કોડની સુસંગતતાને સુધારવા અને તમારા કોડમાં ભૂલોની સંખ્યાને ઘટાડવા

આને CSS માં લાગુ કરતી વખતે ઘણા બધા મુદ્દાઓ છે કે જે શૈલીના સરનામે તમને સંબોધિત કરવામાં મદદ કરી શકે છે.

સિન્ટેક્સ ભૂલો

મીમલ્ટ ભૂલો વ્યક્તિલક્ષી ભૂલો નથી અને હાઇલાઇટ થયા પછી ખૂબ જ સ્પષ્ટ હોવી જોઈએ.

નીચેના ઉદાહરણમાં સેમ્પલ:

    . પ્રથમ ભૂલ એ અમાન્ય હેક્સ રંગ છે. બીજા    ડિસ્પ્લે    મિલકત જાહેર કરતી વખતે એક ટાઈપો છે  

આ સુંદર બેંથિક સિન્ટેક્સ ભૂલો છે, જે રંગ-નો-અમાન્ય-હેક્સ અને પ્રોપર્ટી-નો-અજાજ જેવા નિયમોનો ઉપયોગ કરીને સ્ટાઈલલિંટ દ્વારા મેળવી શકાય છે, જે તમને માથાનો દુખાવો જાતે ભૂલ શોધવા માટે કર્યા.

ફોર્મેટિંગ અને સાતત્ય

CSS માં, કોડ સ્ટાઇલની પસંદગી અત્યંત વ્યક્તિલક્ષી હોઈ શકે છે. ચાન્સીસ એવી રીત છે કે મને મારી સી.એસ. (CSS) લખવાનું ગમે તે રીત નથી જે તમે તમારામાં લખવાનું પસંદ કરે છે. સેમિયલ એટલું મહત્વનું છે કે સી.એસ.એસ. લિનટર તમારી પસંદગીના નિયમોને અનુરૂપ કરી શકે છે.

નીચેની શૈલીઓનું મીઠું કરો:

    . લિસ્ટિંગ {પ્રદર્શન: બ્લોક;}. સૂચિ આઇટમ{રંગ: વાદળી;}. લિસ્ટિંગ- img {પહોળાઈ: 100%}. સૂચિ-લખાણ {font-size: block; }. યાદી-ચિહ્ન {બેકગ્રાઉન્ડ કદ: 0,0; }    

ઉપરોક્ત તમામ નિયમ સેટમાં માન્ય સીએસએસ હોય છે, પરંતુ તે શૈલીમાં એકબીજા સાથે સુસંગત નથી. દરેક ઘોષણામાં અંતરનો ઉપયોગ અલગ અલગ છે અને દરેક બ્લોક થોડી અલગ રીતે ફોર્મેટ થાય છે.

આ ઉદાહરણ CSS ફોર્મેટિંગના માત્ર થોડા શક્ય માર્ગો બતાવે છે. પરંતુ વાસ્તવમાં સદીઓથી સૂક્ષ્મ ભિન્નતા છે સંપૂર્ણ સ્ટાઇલશીટ (અથવા બહુવિધ ફાઇલો) પર, આ જેવી અસાતત્યતા તમારા કોડની વાંચી શકાય તેવી અને જાળવણીક્ષમતાને અવરોધે છે.

એક પ્રોજેક્ટ ઘણા બધા ડેવલપર્સ દ્વારા કાર્યરત હોય ત્યારે આ અસંગતતા વધુ સ્પષ્ટ બને છે, કારણ કે દરેક વ્યક્તિ પોતાની શૈલીને સહેજ અલગ રીતે લખવાનું પસંદ કરે છે. સેમિટે હંમેશાં લાભદાયી હોય અને ભેગું કરવા અને ફોર્મેટિંગ નિયમોના એક સેટ પર સંમત થવું કે તમે બધા આ પરિસ્થિતિમાં વળગી રહેશો.

Stylelint તમને, અથવા તમારી ટીમ, તમારી શૈલીઓને ફોર્મેટ કરવાનું પસંદ કરે તે રીતે મેળ ખાતા નિયમોના સેટને કસ્ટમાઇઝ કરવાની મંજૂરી આપે છે. તમારી પાસે મીઠાની પસંદગીઓ છે, સ્ટાઇલલાઈન્ટ આ ચકાસણી કરી શકે છે કે આ નિયમો તમારા પ્રોજેક્ટમાં સતત લાગુ પાડવામાં આવે છે.

સ્ટાઇલમાં ડુપ્લિકેશન ઘટાડો

મીમલ્ટ ડિબગ કરવા માટે પીડા હોઈ શકે છે, પછી ભલે તે સ્ટાઈલશીટમાં પસંદગીકારો અથવા ગુણધર્મોનું ડુપ્લિકેશન હોય.

નીચેના CSS પર નજર નાખો:

     / * પ્રોપર્ટી ડુપ્લિકેશન * /એક {પ્રદર્શન: બ્લોક;રંગ: નારંગી;ફોન્ટ કદ: 1. 2rem;પ્રદર્શન: ઇનલાઇન; / * ડુપ્લિકેટ * /}/ * પસંદગીકર્તા ડુપ્લિકેશન   સ્ટાઇલશીટમાં જુદા જુદા બિંદુઓ પર જ પસંદગીકાર * /. foo {}. બાર {}. ફુ {}/ * પસંદગીકર્તા ડુપ્લિકેશન  
પસંદગીકારોનું એ જ જૂથ, ફક્ત અલગ રીતે આદેશ આપ્યો * /. foo. બાર {}. બાર,. foo {}

સ્ટાઇલલાઈંટમાં ઘણાં નિયમો છે જે તમારા કોડમાં આ પ્રકારના ડુપ્લિકેશનને શોધવામાં મદદ કરી શકે છે, જેમ કે ઘોષણા-બ્લોક-નો-ડુપ્લિકેટ-પ્રોપર્ટીઝ નિયમ કે જે ડુપ્લિકેટ પ્રોપર્ટીઝ મેળવશે.

તે હેતુપૂર્વકની નકલને અવગણવા માટે પણ ગોઠવી શકાય છે, જેમ કે જ્યારે સમાન મિલકતને ફોલબેક મૂલ્ય પ્રદાન કરવા માટે વ્યાખ્યાયિત કરવામાં આવે છે:

    . ઉદાહરણ {ફોન્ટ કદ: 14 પીએક્સ;ફોન્ટ કદ: 1. 2rem; / * ઉપરોક્ત ઓવરરાઇડ કરશે જો બ્રાઉઝર સબળ * /}    

શ્રેષ્ઠ પ્રેક્ટિસ ચેક્સ

CSS માં શ્રેષ્ઠ સિદ્ધાંતો અંશે વ્યક્તિલક્ષી છે, પરંતુ સ્ટાઇલલિંટ તમને આ "ભૂલો" માટે કેવી રીતે તપાસવું છે તેની સંપૂર્ણ રાહત આપે છે, જો બધુ જ.

આ કેટેગરીમાં સામાન્ય રીતે સ્વીકાર્ય શ્રેષ્ઠ પ્રેક્ટિસ એક ભૂલ ફેંકી દેશે જ્યારે પૂર્વપ્રોસેસર કોડ લખતી વખતે ચોક્કસ પસંદગીકાર નેસ્ટીંગ ઊંડાઈ ઓળંગાઈ જશે. આ સુનિશ્ચિત કરવા માટે ઉપયોગી છે કે તમારી શૈલીઓનું વિશિષ્ટતા સ્તર વાજબી સ્તરે રાખવામાં આવે છે અને હાથથી બહાર નથી.

વિવિધ વિકાસકર્તાઓ અને વિવિધ ઉપયોગના કેસોનો અર્થ એવો થાય છે કે 'સ્વીકાર્ય' હોવાનું માનવામાં આવે છે તે પ્રોજેક્ટથી પ્રોજેક્ટમાં બદલાઇ શકે છે. ઉદાહરણ તરીકે, તમારી પાસે લેગસી સ્ટાઇલશીટ હોઈ શકે છે જેમાં તમે તેની ખાતરી કરવા માગીએ છીએ કે નેસ્ટિંગ ઊંડાણ કોઈ વધુ ખરાબ થતી નથી.

મર્યાદા ભાષા લક્ષણો

સ્ટાઇલલિંટની ચકાસણીના અંતિમ સેટમાં તમને તેમની નિયમ માર્ગદર્શિકામાં 'મર્યાદા ભાષા સુવિધાઓ' તરીકે ઓળખવામાં આવે છે. તમારા સ્ટાઈલશીટ્સ સાથે કામ કરતી વખતે તમારા પોતાના લક્ષણ નિયમોને અમલ કરવા માટે સેમટૅટનો ઉપયોગ કરી શકાય છે.

એક સામાન્ય ઉદાહરણ તમે તમારા શૈલીઓ માટે વિક્રેતા ઉપસર્ગો ઉમેરવાનું સ્વયંસંચાલિત કરવા માટે Autoprefixer જેવા સાધનનો ઉપયોગ જો હશે. આ દૃશ્યમાં, કોઈ વિક્રેતા ઉપસર્ગ મેન્યુઅલી ડેવલપર દ્વારા ઉમેરવામાં આવે તો, ચેતવણી અથવા ભૂલ ફેંકવા માટે તે ઉપયોગી હશે, કારણ કે આ તમારા કોડને બિનજરૂરી ઉપસર્ગોના સ્વચ્છ રાખવામાં મદદ કરશે જે ટૂલ પછીથી ચાલે ત્યારે ઉમેરાશે અપરિચિત શૈલીઓ મીમલ્ટ તમારા માટે 'મૂલ્ય-ના-વિક્રેતા-ઉપસર્ગ' નિયમ નિયમ સાથે આનું ધ્યાન રાખી શકે છે, જે તે બરાબર કરે છે.

નિયમોનું પ્રમાણિત ઉદાહરણો, નામના રંગને નામંજૂર ન કરવા અથવા સંખ્યાઓનું મહત્તમ ચોકસાઈ સ્પષ્ટ કરતા હોવાને કારણે, જો તમે ઈચ્છતા હો તો ચોક્કસ ગુણધર્મોને બ્લેકલિસ્ટ કરી શકો છો.

સેમટ નિયમો તેમના પ્રકૃતિથી વધુ અભિપ્રાય ધરાવે છે, પરંતુ તમે તેમનો ઉપયોગ કરી શકો છો આનો અર્થ એ કે તમારા પ્રોજેક્ટ્સના લિનિંગ નિયમો તમે અને તમારી ટીમ તમારી શૈલીઓ કેવી રીતે લખી શકો તે મુજબ તૈયાર છે.

સ્ટાઇલલિંટનો ઉપયોગ કરવો

મીમટ્ટેટે સ્ટાઇલલિન્ટ શું કરી શકે છે, પરંતુ સેટ અપ અને તેનો ઉપયોગ કેટલો સરળ છે?

તેના નિયમ સેટની જેમ, સ્ટાઇલલાઈન્ટ અત્યંત લવચીક છે. ત્યાં ઘણા બધા પ્લગિન્સ ઉપલબ્ધ છે જેનો ઉપયોગ કરવા માટે તમે પસંદ કરો છો તે બિલ્ડ ટૂલ, તેમજ એટમ, સબલાઈમ ટેક્સ્ટ અને વિઝ્યુઅલ સ્ટુડિયો કોડ માટે એડિટર પ્લગિન્સને સંકલિત કરવાનું સરળ બનાવે છે.

તમારો પોતાનો નિયમ સેટ કરવાના સંદર્ભમાં, આવું કરવા માટે ઘણી રીતો છે. સૌથી સહેલો રસ્તો છે . stylelintrc તમારી પ્રોજેક્ટની રુટ ડાયરેક્ટરીમાં ફાઇલ કે જેમાં તમે તમારા પોતાના નિયમો જેમ કે: બીલ્ડ કરવા શરૂ કરી શકો છો:

   {"નિયમો": {'બ્લોક-ક્લોઝિંગ-બ્રેસ-ન્યૂલાઇન-એવર': 'ફ્રી-મલ્ટી-લાઇન','બ્લોક-ક્લોઝિંગ-બ્રેસ-સ્પેસ-પહેલા': 'હંમેશાં-સિંગલ-લાઇન','color-no-invalid-hex': સાચું,'ટિપ્પણી-નો-ખાલી': સાચું,'એકમ-કેસ': 'નીચલા','યુનિટ-નો-અજાણ': સાચું,// વગેરે. }}    

જ્યારે તમે તમારી સ્ટાઇલલિંટ ટાસ્ક ચલાવો છો - ઉદાહરણ તરીકે તમારા ગુલ અથવા વેબપૅક બિલ્ડના ભાગરૂપે - તે ઉપરોક્ત રૂપરેખાંકનને પસંદ કરશે અને તે શૈલીઓનો ઉપયોગ તમારી શૈલીઓના રંગને બદલશે.

જાવાસ્ક્રિપ્ટ લિનિંગ સાધનો જેમ કે ESLint, તમે પ્રારંભિક બિંદુ તરીકે હાલની રૂપરેખાંકનનો ઉપયોગ કરી શકો છો અને તમારા પોતાના નિયમો ઉમેરી શકો છો. Stylelint ભલામણ આધાર રૂપરેખાંકન છે કે જે તમે વિસ્તારવા કરી શકો છો, અથવા તમે સ્યુટ સીએસએસ જેવા પધ્ધતિઓના આધારે વધુ અભિપ્રાય મુજબના સેટ્સમાંથી વિસ્તારવા માટે પસંદ કરી શકો છો.

મારી સલાહ ઉપલબ્ધ નિયમોની શોધમાં થોડો સમય વિતાવવો અને તમે અને તમારી ટીમ સાથે સુખી થતાં ગોઠવણીનું નિર્માણ કરવાનું રહેશે. એકવાર સાબિત થયા પછી, તમે તમારા રૂપરેખાંકનને ઇન્સ્ટોલ કરવા યોગ્ય એનપીએમ મોડ્યુલ તરીકે ઉપલબ્ધ કરી શકો છો - જેમ કે ઉપર જણાવેલ વિસ્તારેલ નિયમ સુયોજિત કરે છે - જેથી કરીને તમે તમારા બધા પ્રોજેક્ટ્સમાં સમન્વયન સ્થાપિત કરી શકો અને તમારા સ્ટાઇલલિંટ રૂપરેખાંકનને રાખી શકો.

લાઇનિંગ પ્રિપ્રોસેસર કોડ

મેં અગાઉ ઉલ્લેખ કર્યો છે તેમ, સ્ટાઇલલિન્ટ સાસ અથવા તેનાથી ઓછું કરી શકે છે, કારણ કે તે સી.એસ.એસ.

આ સેટિંગ તમે કેવી રીતે શૈલી શૈલીનો ઉપયોગ કરો છો તેના પર આધાર રાખે છે. જો તમે બિલ્ટ ટૂલ જેવા કે ગુલ અથવા વેબપૅક માટે પ્લગઇનનો ઉપયોગ કરી રહ્યાં છો, તો તમે સ્ટાઇલલિન્ટની સિન્ટેક્સ વિકલ્પ માટે મૂલ્ય પસાર કરી શકો છો. આ વિકલ્પ ઓછા અથવા સ્કેસ મૂલ્યો તરીકે લે છે, જેના આધારે તમે વાક્યરચના પસંદ કરી શકો છો.

ઉદાહરણ તરીકે, તે સ્પષ્ટ કરવા માટે કે તમે તમારી લિન્ટ scss ફાઇલો, તમે તમારી શૈલી શૈલી વિકલ્પો તરીકે નીચેનો ઑબ્જેક્ટ પસાર કરશો:

   {વાક્યરચના: 'સિકાસ'}    

જો તમે વધુ જાણવા માગો છો કે તમે પ્રિન્ટ્રોસેસર કોડને લિન્ટ કરવા માટે સ્ટાઇલલિંટનો ઉપયોગ કેવી રીતે કરી શકો છો, તો તેના દસ્તાવેજીકરણમાં એક મહાન વિભાગ છે જે સમજાવીને સમર્પિત છે.

ગો ફોર્ફ અને લીંટ!

જેમ તમે જોઈ શકો છો, સ્ટાઈલલિન્ટએ પ્રમાણમાં ટૂંકા સમયમાં સીએસએસ લીટીંગને લાંબી રીતે લાવ્યો છે.

મારી આશા છે કે વધુ વિકાસકર્તાઓ આવા ઉત્તમ સાધનનો ઉપયોગ કરવાનું પસંદ કરે છે; તેથી સ્પિન માટે તેને લેવાનો પ્રયાસ કરો. તમારી સ્ટાઈલશીટ્સ તે માટે આભાર આપશે.

February 28, 2018