ઑપ્ટિમાઇઝિંગ TypeScript આયાત: મલ્ટિ-લાઇન ફોર્મેટ માટે સુંદર અને ESLint રૂપરેખાંકિત કરવું

TypeScript માં આયાત નિવેદનોને સુવ્યવસ્થિત કરવું

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

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

જો કે, ઇચ્છિત તરીકે આયાત નિવેદનોને આપમેળે ફોર્મેટ કરવા માટે આ સાધનોને ગોઠવવું મુશ્કેલ હોઈ શકે છે. જ્યારે પ્રિટિયર અને ESLint બંનેની ડિફૉલ્ટ સેટિંગ્સ ઘણા ફોર્મેટિંગ મુદ્દાઓને હેન્ડલ કરે છે, જ્યારે બહુવિધ લાઇનોમાં લાંબા આયાત નિવેદનોને તોડવાની વાત આવે છે ત્યારે તે ઘણી વખત ટૂંકી પડે છે.

આ માર્ગદર્શિકામાં, અમે તમારા TypeScript પ્રોજેક્ટમાં આયાત નિવેદનોને યોગ્ય રીતે ફોર્મેટ કરવા માટે Prettier અને ESLint ને કેવી રીતે ગોઠવવું તે શોધીશું. અમે તમારા સમગ્ર કોડબેઝમાં સુસંગતતા જાળવી રાખીને બહુ-લાઇન આયાત પ્રાપ્ત કરવા માટે જરૂરી સેટિંગ્સમાંથી પસાર થઈશું.

TypeScript માં મલ્ટિ-લાઇન આયાત માટે Prettier અને ESLint રૂપરેખાંકિત કરવું

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

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

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

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

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 80,
  plugins: ['prettier-plugin-organize-imports'],
}
// Prettier configuration setup for import splitting

module.exports = {
  "extends": ["eslint:recommended", "plugin:import/errors", "plugin:import/warnings"],
  "rules": {
    "import/order": [
      "error", {
        "groups": ["builtin", "external", "internal"],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }],
    "max-len": ["error", { "code": 80 }],
  }
}
// ESLint rule setup to organize imports into multiple lines and ensure alphabetical order

import {
  longFunctionNameOne,
  longFunctionNameTwo,
  longFunctionNameThree
} from '@example/long-module-name';

import {
  shortFunctionNameOne,
  shortFunctionNameTwo
} from '@example/short-module-name';
// Example of formatted import statements following the configured rules

const eslint = require('eslint');
const prettier = require('prettier');
const { describe, it } = require('@jest/globals');

describe('Import Formatting', () => {
  it('should split long imports into multiple lines', () => {
    const code = `import { a, b, c, d } from '@example/package';`;
    const formatted = prettier.format(code, { printWidth: 80 });
    expect(formatted).toMatch(/import { a, b }/);
  });
});
// Unit test to check if long imports are split into multiple lines using Jest

પ્રિટિયર અને ESLint આયાત ફોર્મેટિંગ સાથે કોડ વાંચનક્ષમતા વધારવી

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

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

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