ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಸ್ಟ್ರೀಮ್ಲೈನಿಂಗ್ ಮಾಡುವುದು
ದೊಡ್ಡ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ, ದೀರ್ಘ ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಎದುರಿಸುವುದು ಸಾಮಾನ್ಯವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಒಂದೇ ಮಾಡ್ಯೂಲ್ನಿಂದ ಬಹು ಸದಸ್ಯರನ್ನು ಆಮದು ಮಾಡುವಾಗ. ಈ ಸಾಲುಗಳು ಆರಂಭದಲ್ಲಿ ನಿರುಪದ್ರವವೆಂದು ತೋರುತ್ತದೆಯಾದರೂ, ಅವುಗಳು ಸುಲಭವಾಗಿ ನಿಮ್ಮದನ್ನು ಮೀರಬಹುದು ಸುಂದರ ಸಂರಚನೆಯ printWidth ಸೆಟ್ಟಿಂಗ್, ಕೋಡ್ ಅನ್ನು ಓದಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟವಾಗುತ್ತದೆ.
ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅಚ್ಚುಕಟ್ಟಾಗಿ ಮತ್ತು ಓದುವಂತೆ ಇರಿಸಿಕೊಳ್ಳಲು, ಈ ಆಮದುಗಳ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಮುಂತಾದ ಪರಿಕರಗಳು ಸುಂದರ ಮತ್ತು ESLint ದೀರ್ಘ ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬಹು ಸಾಲುಗಳಾಗಿ ವಿಭಜಿಸಲು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು. ನೀವು ಹೊಂದಿಸಿರುವ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ನಿಯಮಗಳಿಗೆ ಬದ್ಧವಾಗಿ ನಿಮ್ಮ ಕೋಡ್ ಸ್ವಚ್ಛ ಮತ್ತು ಸ್ಥಿರವಾಗಿರುತ್ತದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಆದಾಗ್ಯೂ, ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಬಯಸಿದಂತೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಫಾರ್ಮಾಟ್ ಮಾಡಲು ಈ ಪರಿಕರಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು ಟ್ರಿಕಿ ಆಗಿರಬಹುದು. Prettier ಮತ್ತು ESLint ಎರಡರ ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್ಗಳು ಅನೇಕ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಸಮಸ್ಯೆಗಳನ್ನು ನಿಭಾಯಿಸುತ್ತವೆಯಾದರೂ, ಬಹು ಸಾಲುಗಳಲ್ಲಿ ದೀರ್ಘವಾದ ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಒಡೆಯಲು ಬಂದಾಗ ಅವುಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಕಡಿಮೆಯಾಗುತ್ತವೆ.
ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ, ನಿಮ್ಮ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ನಲ್ಲಿ ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಸರಿಯಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು Prettier ಮತ್ತು ESLint ಅನ್ನು ಹೇಗೆ ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ. ನಿಮ್ಮ ಕೋಡ್ಬೇಸ್ನಾದ್ಯಂತ ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುವಾಗ ಬಹು-ಸಾಲಿನ ಆಮದುಗಳನ್ನು ಸಾಧಿಸಲು ಅಗತ್ಯವಿರುವ ಸೆಟ್ಟಿಂಗ್ಗಳ ಮೂಲಕ ನಾವು ನಡೆಯುತ್ತೇವೆ.
ಆಜ್ಞೆ | ಬಳಕೆಯ ಉದಾಹರಣೆ |
---|---|
prettier.format | ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾದ ನಿಯಮಗಳ ಪ್ರಕಾರ ಕೋಡ್ನ ಬ್ಲಾಕ್ ಅನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು ಈ ಪ್ರೆಟಿಯರ್ ಕಾರ್ಯವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ (ಉದಾ., printWidth, singleQuote). ಇದು ಕೋಡ್ನ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿದ ಔಟ್ಪುಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಕೋಡ್ ಶೈಲಿಯ ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಇದು ಸೂಕ್ತವಾಗಿದೆ. |
eslint.RuleTester | ESLint ಗೆ ನಿರ್ದಿಷ್ಟವಾಗಿ, ಈ ಆಜ್ಞೆಯು ಅಭಿವರ್ಧಕರಿಗೆ ಕಸ್ಟಮ್ ESLint ನಿಯಮಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ನಿಯಮ ಪರೀಕ್ಷಕರಿಗೆ ಮಾದರಿ ಕೋಡ್ ಅನ್ನು ಫೀಡ್ ಮಾಡುವ ಮೂಲಕ, ಆಮದುಗಳನ್ನು ಬಹು ಸಾಲುಗಳಾಗಿ ವಿಭಜಿಸುವುದನ್ನು ಖಾತ್ರಿಪಡಿಸುವಂತಹ ನಿಯಮಗಳನ್ನು ಸರಿಯಾಗಿ ಜಾರಿಗೊಳಿಸಲಾಗಿದೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ಇದು ಮೌಲ್ಯೀಕರಿಸುತ್ತದೆ. |
prettier-plugin-organize-imports | ಇದು ಆಮದುಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಂಘಟಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಪ್ರೆಟಿಯರ್ ಪ್ಲಗಿನ್ ಆಗಿದೆ. ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ವಿಂಗಡಿಸಲಾಗಿದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರಿಂಟ್ವಿಡ್ತ್ನಂತಹ ಪ್ರೆಟಿಯರ್ ನಿಯಮಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ, ಇದು ಬಹು ಸಾಲುಗಳಲ್ಲಿ ದೀರ್ಘ ಆಮದುಗಳನ್ನು ವಿಭಜಿಸಬಹುದು. |
jest.describe | ಸಂಬಂಧಿತ ಪರೀಕ್ಷೆಗಳನ್ನು ಒಟ್ಟಿಗೆ ಗುಂಪು ಮಾಡುವ ಜೆಸ್ಟ್ ಫಂಕ್ಷನ್. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ESLint ಮತ್ತು Prettier ಕಾನ್ಫಿಗರೇಶನ್ಗಳು ದೀರ್ಘ ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಬಹು ಸಾಲುಗಳಾಗಿ ವಿಭಜಿಸುವ ಮೂಲಕ ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸುತ್ತವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುವ ಪರೀಕ್ಷೆಗಳನ್ನು ಇದು ಗುಂಪು ಮಾಡುತ್ತದೆ. |
import/order | ಇದು eslint-plugin-import ನಿಂದ ನಿರ್ದಿಷ್ಟ ESLint ನಿಯಮವಾಗಿದ್ದು ಅದು ಆಮದು ಹೇಳಿಕೆಗಳ ಕ್ರಮದ ಮೇಲೆ ಒಂದು ಸಮಾವೇಶವನ್ನು ಜಾರಿಗೊಳಿಸುತ್ತದೆ. ವಿವಿಧ ಆಮದು ಗುಂಪುಗಳ ನಡುವೆ (ಉದಾಹರಣೆಗೆ, ಅಂತರ್ನಿರ್ಮಿತ, ಬಾಹ್ಯ ಪ್ಯಾಕೇಜ್ಗಳು) ಹೊಸ ಲೈನ್ಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ಇದು ಜಾರಿಗೊಳಿಸಬಹುದು. |
alphabetize | ಆಮದು/ಆರ್ಡರ್ ESLint ನಿಯಮದೊಳಗೆ, ಆಮದು ಮಾಡಿದ ಸದಸ್ಯರನ್ನು ವರ್ಣಮಾಲೆಯಂತೆ ವಿಂಗಡಿಸಲಾಗಿದೆ ಎಂದು ಈ ಆಯ್ಕೆಯು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ಕೋಡ್ ಓದುವಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಬಹು ಆಮದುಗಳೊಂದಿಗೆ ದೊಡ್ಡ ಯೋಜನೆಗಳಲ್ಲಿ. |
jest.it | ಒಂದೇ ಘಟಕ ಪರೀಕ್ಷೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಈ ಜೆಸ್ಟ್ ಕಾರ್ಯವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾದ ಪ್ರೆಟಿಯರ್ ಮತ್ತು ESLint ನಿಯಮಗಳ ಮೂಲಕ ದೀರ್ಘ ಆಮದುಗಳನ್ನು ಸರಿಯಾಗಿ ಬಹು ಸಾಲುಗಳಾಗಿ ವಿಂಗಡಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. |
newlines-between | ಆಮದು/ಆರ್ಡರ್ ESLint ನಿಯಮಕ್ಕಾಗಿ ಸಂರಚನಾ ಆಯ್ಕೆ. ಇದು ಆಮದು ಗುಂಪುಗಳ ನಡುವೆ ಹೊಸ ಲೈನ್ಗಳನ್ನು ಒತ್ತಾಯಿಸುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, ಬಾಹ್ಯ ಮತ್ತು ಆಂತರಿಕ ಆಮದುಗಳು), ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ರಚನಾತ್ಮಕವಾಗಿ ಮತ್ತು ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. |
ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಬಹು-ಸಾಲಿನ ಆಮದುಗಳಿಗಾಗಿ ಪ್ರೆಟಿಯರ್ ಮತ್ತು ESLint ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾಗುತ್ತಿದೆ
ಮೇಲಿನ ಸ್ಕ್ರಿಪ್ಟ್ಗಳ ಮುಖ್ಯ ಗುರಿ ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು ಸುಂದರ ಮತ್ತು ESLint ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಯೋಜನೆಯಲ್ಲಿ ಬಹು ಸಾಲುಗಳಲ್ಲಿ ದೀರ್ಘ ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು. ಸಿಂಗಲ್ ಕೋಟ್ಗಳು ಮತ್ತು ಟ್ರೇಲಿಂಗ್ ಅಲ್ಪವಿರಾಮಗಳಂತಹ ಕೋಡಿಂಗ್ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಸುತ್ತಿಕೊಳ್ಳಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ವಹಿಸಲು ಪ್ರೆಟಿಯರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಹೊಂದಿಸಲಾಗಿದೆ. printWidth ನಿಯಮ. ಸಾಲು ಸೆಟ್ ಅಗಲವನ್ನು ಮೀರಿದಾಗ (ಈ ಸಂದರ್ಭದಲ್ಲಿ, 80 ಅಥವಾ 120 ಅಕ್ಷರಗಳು), ಪ್ರೆಟಿಯರ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಓದುವಂತೆ ಮಾಡಲು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡುತ್ತದೆ. ಬಳಸುವ ಮೂಲಕ prettier-plugin-organize-imports ಪ್ಲಗಿನ್, ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ವಿಭಜಿಸಿ ತಾರ್ಕಿಕವಾಗಿ ವಿಂಗಡಿಸಲಾಗಿದೆ ಎಂದು ನಾವು ಖಚಿತಪಡಿಸುತ್ತೇವೆ.
ESLint ಸಂರಚನೆಯಲ್ಲಿ, ದಿ ಆಮದು/ಆದೇಶ ನಿಂದ ನಿಯಮ ಎಸ್ಲಿಂಟ್-ಪ್ಲಗಿನ್-ಆಮದು ಆಮದುಗಳನ್ನು ಹೇಗೆ ಆಯೋಜಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು ಪ್ಲಗಿನ್ ಅತ್ಯಗತ್ಯ. ಸ್ಥಿರವಾದ ಆಮದು ರಚನೆಯನ್ನು ಜಾರಿಗೊಳಿಸುವುದು ಇಲ್ಲಿ ಗುರಿಯಾಗಿದೆ, ಅಲ್ಲಿ ವಿವಿಧ ಗುಂಪುಗಳಿಂದ (ಅಂತರ್ನಿರ್ಮಿತ ಮಾಡ್ಯೂಲ್ಗಳು, ಬಾಹ್ಯ ಪ್ಯಾಕೇಜ್ಗಳು ಮತ್ತು ಆಂತರಿಕ ಮಾಡ್ಯೂಲ್ಗಳಂತಹ) ಆಮದುಗಳನ್ನು ಹೊಸ ಲೈನ್ಗಳಿಂದ ಬೇರ್ಪಡಿಸಲಾಗುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸಲು ಒಂದೇ ಗುಂಪಿನೊಳಗಿನ ಆಮದುಗಳನ್ನು ವರ್ಣಮಾಲೆಯ ಮಾಡಲಾಗುತ್ತದೆ. ಈ ನಿಯಮಗಳು ಆಮದುಗಳು ಅಸ್ತವ್ಯಸ್ತವಾಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಬಹು ಫೈಲ್ಗಳಿಂದ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ಆಮದು ಮಾಡಿದ ಸದಸ್ಯರೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ.
ESLint ಸೆಟಪ್ನ ಮತ್ತೊಂದು ಮಹತ್ವದ ಅಂಶವೆಂದರೆ ಹೊಸ ಸಾಲುಗಳು- ನಡುವೆ ಆಯ್ಕೆ, ಇದು ಪ್ರತಿ ಆಮದು ಗುಂಪನ್ನು ಖಾಲಿ ರೇಖೆಯಿಂದ ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಸಂಘಟಿಸುವಂತೆ ಮಾಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಕೋಡ್ಬೇಸ್ಗಳಲ್ಲಿ. ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಲಾಗಿದೆ ವರ್ಣಮಾಲೆಯ ನಿಯಮ, ಸಂಪೂರ್ಣ ಆಮದು ಬ್ಲಾಕ್ ರಚನೆಯಾಗುತ್ತದೆ ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ. ವಿಷುಯಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ನಲ್ಲಿ ಸೇವ್ನಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿದಾಗ, ಈ ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ, ಹಸ್ತಚಾಲಿತ ಹೊಂದಾಣಿಕೆಗಳಿಲ್ಲದೆ ಸಂಪೂರ್ಣ ಪ್ರಾಜೆಕ್ಟ್ನಾದ್ಯಂತ ಸ್ಥಿರವಾದ ಆಮದು ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಕೊನೆಯದಾಗಿ, ಈ ಸಂರಚನೆಯನ್ನು ಪರೀಕ್ಷಿಸುವುದು ಅದು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಮುಖ್ಯವಾಗಿದೆ. ದಿ ಜೆಸ್ಟ್ Prettier ಮತ್ತು ESLint ಕಾನ್ಫಿಗರೇಶನ್ಗಳು ಆಮದು ವಿಭಜನೆ ಮತ್ತು ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ನಿರೀಕ್ಷಿಸಿದಂತೆ ನಿರ್ವಹಿಸುತ್ತವೆಯೇ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಲು ಘಟಕ ಪರೀಕ್ಷೆಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ದೀರ್ಘವಾದ ಆಮದು ಹೇಳಿಕೆಯನ್ನು ಒದಗಿಸಿದಾಗ, ಅದನ್ನು ಸರಿಯಾಗಿ ಬಹು ಸಾಲುಗಳಾಗಿ ವಿಂಗಡಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರೀಕ್ಷೆಯು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಡೆವಲಪರ್ಗಳು ತಮ್ಮ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ನಿಯಮಗಳ ಪರೀಕ್ಷೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಯಾವುದೇ ಭವಿಷ್ಯದ ಕೋಡ್ ಬದಲಾವಣೆಗಳು ಅದೇ ಆಮದು ರಚನೆ ಮಾರ್ಗಸೂಚಿಗಳಿಗೆ ಬದ್ಧವಾಗಿರುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ದೀರ್ಘ ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ವಿಭಜಿಸಲು ಪ್ರೆಟಿಯರ್ ಮತ್ತು ESLint ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾಗುತ್ತಿದೆ
ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ನಲ್ಲಿ ಬಹು-ಸಾಲಿನ ಆಮದು ಹೇಳಿಕೆಗಳಿಗಾಗಿ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಈ ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರೆಟಿಯರ್ ಮತ್ತು ESLint ಅನ್ನು ಬಳಸುತ್ತದೆ. ವಿಷುಯಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ನೊಂದಿಗೆ ಮುಂಭಾಗದ ಅಭಿವೃದ್ಧಿಯ ಮೇಲೆ ಗಮನ ಕೇಂದ್ರೀಕರಿಸಿದೆ.
module.exports = {
semi: false,
singleQuote: true,
trailingComma: 'all',
printWidth: 80,
plugins: ['prettier-plugin-organize-imports'],
}
// Prettier configuration setup for import splitting
ESLint ಪ್ಲಗಿನ್ ಆಮದು ಜೊತೆಗೆ ಆಮದು ಫಾರ್ಮ್ಯಾಟಿಂಗ್ಗಾಗಿ ESLint ಅನ್ನು ಬಳಸುವುದು
ಬಹು-ಸಾಲಿನ ಆಮದು ನಿಯಮಗಳನ್ನು ಜಾರಿಗೊಳಿಸಲು ಈ ಬ್ಯಾಕ್-ಎಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್ ಆಮದು ಪ್ಲಗಿನ್ನೊಂದಿಗೆ ESLint ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುತ್ತದೆ. ಇದು ಆಪ್ಟಿಮೈಸ್ಡ್ ಕೋಡ್ ಮಾಡ್ಯುಲಾರಿಟಿಯನ್ನು ಖಾತ್ರಿಗೊಳಿಸುತ್ತದೆ.
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
ಆಮದು ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಉದಾಹರಣೆ ಸ್ಕ್ರಿಪ್ಟ್
ಈ ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರೆಟಿಯರ್ ಮತ್ತು ESLint ಕಾನ್ಫಿಗರೇಶನ್ಗಳ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ದೀರ್ಘ ಆಮದುಗಳನ್ನು ಬಹು ಸಾಲುಗಳಾಗಿ ವಿಭಜಿಸುವ ಮುಂಭಾಗದ ಉದಾಹರಣೆಯಾಗಿ ಇದು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
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
ಆಮದು ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಸೆಟಪ್ ಅನ್ನು ಪರೀಕ್ಷಿಸುವ ಘಟಕ
ಈ ಬ್ಯಾಕ್-ಎಂಡ್ ಸ್ಕ್ರಿಪ್ಟ್ ವಿವಿಧ ಪರಿಸರಗಳಲ್ಲಿ ನಿರೀಕ್ಷಿಸಿದಂತೆ ಪ್ರೆಟಿಯರ್ ಮತ್ತು ESLint ಕಾನ್ಫಿಗರೇಶನ್ಗಳನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು Jest ಅನ್ನು ಬಳಸಿಕೊಂಡು ಘಟಕ ಪರೀಕ್ಷೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
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 ನೀವು ಬಹು ಸಾಲುಗಳಲ್ಲಿ ಆಮದುಗಳ ವಿಭಜನೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುವ ಕಾರ್ಯಕ್ಕೆ ಬನ್ನಿ. ಆಮದು ಹೇಳಿಕೆಗಳು ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಅಗಲಕ್ಕೆ ಬದ್ಧವಾಗಿರುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು, ಸಾಮಾನ್ಯವಾಗಿ ಆಧರಿಸಿ printWidth ಸೆಟ್ಟಿಂಗ್, ಸಮತಲ ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ತಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಸ್ಕ್ಯಾನ್ ಮಾಡಲು ಕೋಡ್ ಅನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
ಮತ್ತೊಂದು ನಿರ್ಣಾಯಕ ಅಂಶವೆಂದರೆ ಆಮದುಗಳ ಸಾಂಸ್ಥಿಕ ಮಾದರಿ. ಅನ್ನು ಬಳಸುವುದು ಆಮದು/ಆದೇಶ ESLint ಒದಗಿಸಿದ ನಿಯಮ, ನೀವು ಅವುಗಳ ಮೂಲವನ್ನು ಆಧರಿಸಿ ಆಮದುಗಳನ್ನು ಗುಂಪು ಮಾಡಬಹುದು: ಅಂತರ್ನಿರ್ಮಿತ ಗ್ರಂಥಾಲಯಗಳು, ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಅವಲಂಬನೆಗಳು ಅಥವಾ ಆಂತರಿಕ ಮಾಡ್ಯೂಲ್ಗಳು. ಈ ಗುಂಪುಗಳನ್ನು ಹೊಸ ಲೈನ್ಗಳಿಂದ ವಿಭಜಿಸಬಹುದು, ಡೆವಲಪರ್ಗಳಿಗೆ ಅವಲಂಬನೆಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಗುರುತಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ. ಈ ವಿಧಾನವು ರಚನಾತ್ಮಕ ಆಮದುಗಳನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ, ಇದು ವರ್ಣಮಾಲೆಯ ವಿಂಗಡಣೆಯೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ ವರ್ಣಮಾಲೆಯ ಆಯ್ಕೆ, ಕೋಡ್ಬೇಸ್ನಾದ್ಯಂತ ಸ್ಪಷ್ಟತೆ ಮತ್ತು ಸ್ಥಿರತೆಯನ್ನು ಮತ್ತಷ್ಟು ಹೆಚ್ಚಿಸುತ್ತದೆ.
ಹೆಚ್ಚುವರಿಯಾಗಿ, ಡೆವಲಪರ್ಗಳು ಉಪಕರಣಗಳನ್ನು ಹತೋಟಿಗೆ ತರಲು ಬಯಸಬಹುದು prettier-plugin-organize-imports ಆಮದುಗಳನ್ನು ಸರಿಯಾಗಿ ವಿಭಜಿಸಲಾಗಿಲ್ಲ ಆದರೆ ತಾರ್ಕಿಕವಾಗಿ ಮರುಹೊಂದಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು. ವಿಷುಯಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ನಂತಹ ಎಡಿಟರ್ನಲ್ಲಿ ಫೈಲ್ ಅನ್ನು ಉಳಿಸಿದಾಗಲೆಲ್ಲಾ ಈ ಉಪಕರಣಗಳು ಬಯಸಿದ ಆಮದು ರಚನೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಜಾರಿಗೊಳಿಸುತ್ತವೆ. ಡೆವಲಪರ್ಗಳು ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಹೊಂದಿಸಬೇಕಾಗಿಲ್ಲ ಮತ್ತು ಕ್ಲೀನರ್ ಮತ್ತು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಹುದಾದ ಕೋಡ್ ಅನ್ನು ಬರೆಯುವುದರ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಬಹುದು ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
Prettier ಮತ್ತು ESLint ನೊಂದಿಗೆ ಆಮದು ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಬಗ್ಗೆ ಸಾಮಾನ್ಯ ಪ್ರಶ್ನೆಗಳು
- ಯಾವುದು ಉತ್ತಮ ESLint ಆಮದುಗಳನ್ನು ಸಂಘಟಿಸುವ ನಿಯಮ?
- ದಿ import/order ನಿಂದ ನಿಯಮ eslint-plugin-import ಆಮದುಗಳನ್ನು ಸಂಘಟಿಸಲು ಸೂಕ್ತವಾಗಿದೆ. ಆಮದುಗಳನ್ನು ನಿರಂತರವಾಗಿ ಗುಂಪು ಮಾಡಲು, ವಿಂಗಡಿಸಲು ಮತ್ತು ರಚನೆ ಮಾಡಲು ಇದು ನಿಮ್ಮನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
- ನಾನು ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಬಹು ಸಾಲುಗಳಾಗಿ ವಿಭಜಿಸಬಹುದೇ? Prettier ಒಬ್ಬನೇ?
- ಪ್ರೆಟಿಯರ್ ದೀರ್ಘ ಆಮದು ಹೇಳಿಕೆಗಳನ್ನು ಬಹು ಸಾಲುಗಳಾಗಿ ವಿಭಜಿಸಬಹುದು printWidth ನಿಯಮ ಮೀರಿದೆ. ಆದಾಗ್ಯೂ, ಇದನ್ನು ESLint ನೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು ಹೆಚ್ಚಿನ ಗ್ರಾಹಕೀಕರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.
- ಏನು ಮಾಡುತ್ತದೆ alphabetize ಆಯ್ಕೆಯನ್ನು ಮಾಡುವುದೇ?
- ದಿ alphabetize ಆಯ್ಕೆಯಲ್ಲಿ import/order ಆಮದು ಸದಸ್ಯರು ಮತ್ತು ಹೇಳಿಕೆಗಳನ್ನು ವರ್ಣಮಾಲೆಯಂತೆ ವಿಂಗಡಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಕೋಡ್ ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
- ಉಳಿಸಿದಾಗ ನನ್ನ ಆಮದುಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾಗಿದೆ ಎಂದು ನಾನು ಹೇಗೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು?
- ಎರಡನ್ನೂ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ Prettier ಮತ್ತು ESLint ಸಾಮಾನ್ಯವಾಗಿ ಸೆಟ್ಟಿಂಗ್ಗಳ ಮೂಲಕ ನಿಮ್ಮ ಸಂಪಾದಕದಲ್ಲಿ ಉಳಿಸಲು ರನ್ ಮಾಡಲು ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾಗಿದೆ Visual Studio Code ಅಥವಾ ಅಂತಹುದೇ IDEಗಳು.
- ಏಕೆ ಬಳಸಬೇಕು prettier-plugin-organize-imports?
- ಈ ಪ್ಲಗಿನ್ ಆಮದುಗಳನ್ನು ಬಹು ಸಾಲುಗಳಲ್ಲಿ ವಿಭಜಿಸುವುದನ್ನು ಮಾತ್ರವಲ್ಲದೆ ತಾರ್ಕಿಕವಾಗಿ ವಿಂಗಡಿಸಲಾಗಿದೆ ಮತ್ತು ಗುಂಪು ಮಾಡುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಕೋಡ್ ನಿರ್ವಹಣೆಯನ್ನು ಮತ್ತಷ್ಟು ಹೆಚ್ಚಿಸುತ್ತದೆ.
ಪ್ರೆಟಿಯರ್ ಮತ್ತು ESLint ಕಾನ್ಫಿಗರೇಶನ್ನ ಅಂತಿಮ ಆಲೋಚನೆಗಳು
ಆಮದು ಹೇಳಿಕೆಗಳ ಸ್ವಯಂಚಾಲಿತ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ಗಾಗಿ Prettier ಮತ್ತು ESLint ಅನ್ನು ಹೊಂದಿಸುವುದು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ನ ನಿರ್ವಹಣೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಪ್ರಬಲ ಮಾರ್ಗವಾಗಿದೆ. ದೀರ್ಘ ಆಮದುಗಳನ್ನು ವಿಭಜಿಸಿ, ವಿಂಗಡಿಸಲಾಗಿದೆ ಮತ್ತು ತಾರ್ಕಿಕವಾಗಿ ಆಯೋಜಿಸಲಾಗಿದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಪ್ಲಗಿನ್ಗಳೊಂದಿಗೆ ಈ ಪರಿಕರಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ಗಳಾದ್ಯಂತ ನೀವು ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುತ್ತೀರಿ. ಇದು ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛವಾಗಿರಿಸುತ್ತದೆ ಆದರೆ ಆಮದು ರಚನೆಯು ಏಕರೂಪವಾಗಿ ಉಳಿಯುವುದರಿಂದ ನಿಮ್ಮ ತಂಡದಲ್ಲಿ ಸಹಯೋಗವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
Prettier ಮತ್ತು ESLint ಕಾನ್ಫಿಗರೇಶನ್ಗಾಗಿ ಉಲ್ಲೇಖಗಳು ಮತ್ತು ಉಪಯುಕ್ತ ಮೂಲಗಳು
- ಪ್ರೆಟಿಯರ್ನ ಕಾನ್ಫಿಗರೇಶನ್ನ ಅಧಿಕೃತ ದಾಖಲಾತಿಗಾಗಿ, ಇದನ್ನು ನೋಡಿ ಪ್ರೆಟಿಯರ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ .
- ESLint ಮತ್ತು ಆಮದು/ಆರ್ಡರ್ ನಿಯಮದ ಕುರಿತು ವಿವರವಾದ ಮಾಹಿತಿಯನ್ನು ಇಲ್ಲಿ ಕಾಣಬಹುದು eslint-plugin-import GitHub .
- Prettier ಪ್ಲಗಿನ್ಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸಲು prettier-plugin-organize-imports, ಭೇಟಿ ನೀಡಿ prettier-plugin-organize-imports GitHub .
- ಉಳಿಸುವಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು ವಿಷುಯಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವ ಕುರಿತು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಗಾಗಿ, ಪರಿಶೀಲಿಸಿ ವಿಷುಯಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ ಸೆಟ್ಟಿಂಗ್ಗಳು .