Please enable JavaScript.

Coggle requires JavaScript to display documents.

ESLINTStylelintPrettiereditorconfig, Prettier, editorconfig, ESLINT …

- - - - No unused variables / imports :red_cross:.
        
        No var :red_cross: (use let / const instead :check:)
        
        Some code quality errors are not auto-fixable :wrench: :red_cross:
        Because, eslint doesn't know how to fix them, because these rules are very complex, for example :arrow_right:
        Some other code quality errors are auto-fiable :wrench: :check:.
        
        function processUserData(user) { if (user) { if (user.profile) { if (user.profile.address) { if (user.profile.address.city === "New York") { console.log("User is from New York."); if (user.profile.address.zipCode === "10001") { console.log("User is from the main New York area."); // Further nested logic could go here } else { console.log("User is from a different New York zip code."); } } else { console.log("User is not from New York."); } } else { console.log("User has no address information."); } } else { console.log("User has no profile information."); } } else { console.log("No user data provided."); } }
        This code is deeply nested, it violoates the eslint rule ⬇️
        max-depth: ["error", 4]
    - - Maximum line length
        
        End of file new line
        
        Usage of tabs / spaces
        
        Usage of single quotes or double quotes
        
        Extra comma in JavaScript object literals
        
        Semicolons in the end of line
        
        These rules are auto-fixable :wrench: :check:.
        For example, when you run:
        eslint . --fix
        then eslint will fix all the code-formmatting errors
- - - - Maximum line length
        
        End of file new line
        
        Usage of tabs / spaces
        
        Usage of single quotes or double quotes
        
        Extra comma in JavaScript object literals
        
        Semicolons in the end of line
        
        These rules are auto-fixable by prettier :wrench: :check:, in two ways:
        :one: If you have prettier extension in vscode, then you can format a file with keyboard shortcut.
        :two: Or you can format a file on the command line:
        prettier --write PATH_TO_FILE
- - - - Without any extension, ESLint only understands JavaScript files. To lint TypeScript, we need these two packages :arrow_right:
        
        ＠typescript-eslint/parser
        
        With this parser
        
        Eslint can understand TypeScript files
        
        ＠typescript-eslint-plugin
        
        This plugin contains
        
        linting rules about TypeScript files
    - - We delegate all the code formatting rules to prettier, because prettier is a pure code formatter
        
        it only focus on code formatting and it does it well :+1: and fast :rocket:
        
        https://blog.theodo.com/2019/08/empower-your-dev-environment-with-eslint-prettier-and-editorconfig-with-no-conflicts/
      - We delegate all the code quality 💯 rules to linters (such as eslint, stylelint), because:
        
        linters are not good at formatting code :red_cross:
        
        linters are good at code quality errors :check:
      - How is the separation of concerns done exactly in real-world frontend projects?
        
        In ESLint, we can delegate the job of code formatting to prettier by doing this :arrow_right:
        
        In .eslintrc.js file
        { "extends": [ 'eslint:recommended', :one: 'plugin:@angular-eslint/recommended', :two: 'plugin:@typescript-eslint/recommended', :three: 'plugin:jest/recommended', 'plugin:jest-formatting/recommended', 'plugin:prettier/recommended' :star: ], "env": { "es6": true, "node": true } }
        :star: Always put 'plugin:prettier/recommended' in the end, in this way it'll make sure it overwrites all the other CODE FORMATTING RULES.
        
        eslint-config-prettier
        disables formatting-related rules from other places.
        
        eslint-plugin-prettier
        runs Prettier as a rule inside ESLint
        
        In Stylelint, we delegate the job of code formatting to prettier by doing this :arrow_right:
        
        In .stylintrc.js file
        { "extends": ["stylelint-config-standard-scss"], "plugins": ["stylelint-prettier"], :star: Add this line "rules: { ... "indentation": 2, :star: Remove this line "string-quotes": "double" :star: Remove This line ... } }
        
        In .prettierrc file
        { "printWidth": 120, "tabWidth": 2, "useTabs": false, "overrides": [ { "files": "scss", "options": { "parser": "scss", "singleQuotes": false } } ] }
        
        We also need to install the following package from npm
        stylelint-prettier
- - - - In this file we
        
        define the linting rules
  - - - FIRST TIME we launch eslint
        
        eslint . --cache
        Then the results will be stored into the .eslintcache file.
        
        It may take 30~35 seconds
      - SECOND TIME, eslint will be launched only against modified files.
        
        For untouched files, eslint will retrieve the results from the .eslintcache file. :arrow_upper_right:
        
        It takes only 1 second.
- - - - Different file types, such as
        
        html
        
        json
        
        JavaScript
        
        yaml
        
        TypeScript
        
        ...
        
        HTML file example
        ESLint can forbid the usage of duplicate attributes in html tags:
        <div foo="foo1" foo="foo2"> </div>
      - Framework-specific files:
        
        Angular
        
        React
        
        Vue
        
        Jest
        
        Cypress
        
        Playwright
        
        ...
    - - Some extensions contain a set of rules.
        
        Such as the eslint plugin below
        @angular-eslint/eslint-plugin
        
        Then we can extend a set of rules from this plugin as below, in .eslintrc file
        extends: ['plugin:@angular-eslint/recommended']
      - Some extensions contain individual rules for us to use
        
        Such as the eslint plugin below
        unused-imports
        
        Then we can use a specific rule from this plugin as below, in .eslintrc file
        rules: { 'unused-imports/no-unused-imports': 'error' }