Sorting with Prettier
npm uninstall eslint stylelint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react grunt-stylelint stylelint-config-sass-guidelines stylelint-scss babel-eslint grunt-eslint --save-devnpm info "eslint-config-airbnb-base@latest" peerDependenciesnpm install --save-dev eslint eslint-plugin-import eslint-config-airbnb-basenpm install eslint@^8.57.1 babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-devnpm install eslint-plugin-sort-keys-fix@latest eslint-plugin-simple-import-sort@latest --save-devnpm install grunt-eslint babel-eslint --save-devnpm install eslint-plugin-prettier@latest @babel/eslint-parser --save-devnpm install --save-dev --save-exact prettier prettier-eslint @babel/preset-reactnpm install --save-dev prettier-plugin-organize-imports prettier-plugin-organize-attributes prettier-plugin-tailwindcss-extra-plus prettier-plugin-tailwindcssnpm install eslint@^8.57.1 eslint-plugin-sort-keys-fix@latest eslint-plugin-simple-import-sort@latest --save-devnpm install eslint-plugin-react-hooks@latest eslint-config-prettier install @typescript-eslint/eslint-plugin@latest --save-devESLint Configs
Section titled “ESLint Configs”Non-Astro Project
Section titled “Non-Astro Project”{ "env": { "browser": true, "es2021": true, "es2022": true, "es6": true, "jest": true, "jquery": true, "node": true }, "extends": [ "airbnb-base", "eslint:recommended", "plugin:jsx-a11y/recommended", "plugin:prettier/recommended", "plugin:react-hooks/recommended", "plugin:react/recommended", "prettier" ], "globals": { "$": true, "jQuery": true }, "overrides": [ { "files": ["tailwind.config.ts", "astro.config.mjs"], "parser": "espree", "parserOptions": { "sourceType": "module" }, "rules": {} }, { "files": ["*.config.js", "webpack.*.js"], "rules": { "import/no-extraneous-dependencies": "off" } }, { "files": ["*.mdx"], "parser": "eslint-mdx", "rules": { "@typescript-eslint/no-unused-vars": "off", "no-unused-expressions": "off", "react/jsx-no-undef": "off", "semi": "off" } }, { "excludedFiles": [ "**/*.min.js.map", "**/*.min.js", "assets/dist/**", "assets/js/bundle.js", "src/scripts/tw-elements.js", "stencil.conf.js", "webpack.*.js" ], "files": ["*.cjs", "*.js", "*.jsx", "*.mjs", "*.ts", "*.tsx"] }, { "env": { "node": true }, "files": ["*.config.js", "*.config.mjs", "*.config.ts", "webpack.*.js"], "parserOptions": { "sourceType": "module" }, "rules": { "import/no-extraneous-dependencies": "off" } } ], "parser": "@babel/eslint-parser", "parserOptions": { "babelOptions": { "presets": ["@babel/preset-env", "@babel/preset-react"] }, "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2021, "requireConfigFile": false, "sourceType": "module" }, "plugins": [ "@typescript-eslint", "jsx-a11y", "prettier", "react", "react-hooks", "jsx-a11y", "simple-import-sort", "sort-keys-fix" ], "root": true, "rules": { "block-scoped-var": 0, "class-methods-use-this": 0, "consistent-return": 0, "default-case": 0, "default-param-last": 0, "eqeqeq": ["warn", "smart"], "func-names": 0, "global-require": "off", "import/extensions": [ "error", "ignorePackages", { "astro": "always", "js": "never", "json": "always", "jsx": "never", "mdx": "never", "ts": "never", "tsx": "never" } ], "import/first": 0, "import/namespace": 0, "import/no-cycle": 0, "import/no-named-as-default": 0, "import/no-named-as-default-member": 0, "import/order": "off", "import/prefer-default-export": "off", "jsx-a11y/anchor-is-valid": "off", "jsx-a11y/no-noninteractive-element-to-interactive-role": "off", "jsx-a11y/no-redundant-roles": "off", "linebreak-style": ["error", "unix"], "max-classes-per-file": 0, "max-len": 0, "max-lines": "off", "new-cap": 0, "newline-per-chained-call": 0, "no-alert": 0, "no-cond-assign": 0, "no-const-assign": 0, "no-constructor-return": 0, "no-empty-function": 0, "no-inner-declarations": 0, "no-loop-func": 0, "no-mixed-operators": 0, "no-mixed-spaces-and-tabs": 2, "no-multi-assign": 0, "no-multi-str": 0, "no-new": 0, "no-param-reassign": 0, "no-plusplus": 0, "no-prototype-builtins": 0, "no-redeclare": 0, "no-restricted-globals": 0, "no-restricted-syntax": 0, "no-shadow": 0, "no-template-curly-in-string": 0, "no-undef": 0, "no-undef-init": 0, "no-underscore-dangle": 0, "no-unused-expressions": 0, "no-unused-vars": [ "warn", { "argsIgnorePattern": "^_" } ], "no-use-before-define": 0, "no-useless-concat": 0, "no-useless-constructor": 0, "no-useless-escape": 0, "no-useless-return": 0, "no-var": "error", "object-shorthand": 0, "one-var": 0, "one-var-declaration-per-line": 0, "operator-assignment": 0, "prefer-arrow-callback": 0, "prefer-const": "warn", "prefer-destructuring": 0, "prefer-rest-params": 0, "prefer-spread": 0, "prettier/prettier": "off", "quote-props": 0, "quotes": [ "error", "single", { "avoidEscape": true } ], "react-hooks/exhaustive-deps": "warn", "react-hooks/rules-of-hooks": "error", "react/jsx-sort-props": [ "warn", { "callbacksLast": true, "ignoreCase": true, "noSortAlphabetically": false, "reservedFirst": true, "shorthandFirst": true } ], "react/jsx-uses-react": "off", "react/no-unescaped-entities": "off", "react/prop-types": "off", "react/react-in-jsx-scope": "off", "semi": ["error", "always"], "simple-import-sort/exports": "warn", "simple-import-sort/imports": "off", "sonarjs/cognitive-complexity": 0, "sonarjs/prefer-optional-chain": 0, "sort-imports": "off", "sort-keys": [ "warn", "asc", { "caseSensitive": false, "natural": true } ], "sort-keys-fix/sort-keys-fix": [ "warn", "asc", { "caseSensitive": false, "natural": true } ], "vars-on-top": 0 }, "settings": { "import/resolver": { "node": { "extensions": [".js", ".jsx", ".ts", ".tsx", ".astro", ".mjs"], "moduleDirectory": ["node_modules", "src/"] } }, "react": { "version": "detect" } }}{ "env": { "browser": true, "es2021": true, "es2022": true, "es6": true, "jest": true, "jquery": true, "node": true }, "extends": [ "plugin:jsx-a11y/recommended", "airbnb-base", "eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:astro/recommended", "prettier", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended" ], "globals": { "$": true, "jQuery": true }, "overrides": [ { "files": ["tailwind.config.ts", "astro.config.mjs"], "parser": "espree", "parserOptions": { "sourceType": "module" }, "rules": {} }, { "files": ["*.config.js", "webpack.*.js"], "rules": { "import/no-extraneous-dependencies": "off" } }, { "files": ["*.mdx"], "parser": "eslint-mdx", "rules": { "@typescript-eslint/no-unused-vars": "off", "no-unused-expressions": "off", "react/jsx-no-undef": "off", "semi": "off" } }, { "extends": ["plugin:astro/jsx-a11y-recommended", "plugin:astro/recommended"], "files": ["*.astro"], "parser": "astro-eslint-parser", "parserOptions": { "extraFileExtensions": [".astro"], "jsx": true, "parser": "@typescript-eslint/parser", "project": null }, "rules": { "astro/jsx-a11y/no-noninteractive-element-to-interactive-role": "off", "astro/jsx-a11y/no-redundant-roles": "off", "astro/no-conflict-set-directives": "error", "astro/no-unused-define-vars-in-style": "error", "jsx-a11y/anchor-is-valid": "off", "jsx-a11y/click-events-have-key-events": "off", "jsx-a11y/heading-has-content": "off", "jsx-a11y/label-has-associated-control": "off", "jsx-a11y/no-noninteractive-element-to-interactive-role": "off", "react/jsx-key": "off", "react/jsx-uses-react": "off", "react/no-unknown-property": "off", "react/react-in-jsx-scope": "off" } }, { "excludedFiles": [ "assets/js/bundle.js", "assets/dist/**", "stencil.conf.js", "webpack.*.js", "**/*.min.js", "**/*.min.js.map", "src/scripts/tw-elements.js" ], "files": ["*.js", "*.jsx", "*.ts", "*.tsx", "*.cjs", "*.mjs"] }, { "env": { "node": true }, "files": ["webpack.*.js", "*.config.js", "*.config.mjs", "*.config.ts"], "parserOptions": { "project": "./tsconfig.json", "sourceType": "module" }, "rules": { "import/no-extraneous-dependencies": "off" } } ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": "latest", "extraFileExtensions": [".astro"], "project": "./tsconfig.json", "requireConfigFile": false, "sourceType": "module" }, "plugins": [ "@typescript-eslint", "jsx-a11y", "prettier", "react", "react-hooks", "jsx-a11y", "simple-import-sort", "sort-keys-fix" ], "root": true, "rules": { "@typescript-eslint/no-unused-vars": [ "error", { "argsIgnorePattern": "^_" } ], "@typescript-eslint/no-use-before-define": "error", "@typescript-eslint/no-var-requires": "off", "astro/jsx-a11y/no-noninteractive-element-to-interactive-role": "off", "block-scoped-var": 0, "class-methods-use-this": 0, "consistent-return": 0, "default-case": 0, "default-param-last": 0, "eqeqeq": ["warn", "smart"], "func-names": 0, "global-require": "off", "import/extensions": [ "error", "ignorePackages", { "astro": "always", "js": "never", "json": "always", "jsx": "never", "mdx": "never", "ts": "never", "tsx": "never" } ], "import/first": 0, "import/namespace": 0, "import/no-cycle": 0, "import/no-named-as-default": 0, "import/no-named-as-default-member": 0, "import/order": "off", "import/prefer-default-export": "off", "jsx-a11y/anchor-is-valid": "off", "jsx-a11y/no-noninteractive-element-to-interactive-role": "off", "jsx-a11y/no-redundant-roles": "off", "linebreak-style": ["error", "unix"], "max-classes-per-file": 0, "max-len": 0, "max-lines": "off", "new-cap": 0, "newline-per-chained-call": 0, "no-alert": 0, "no-cond-assign": 0, "no-const-assign": 0, "no-constructor-return": 0, "no-empty-function": 0, "no-inner-declarations": 0, "no-loop-func": 0, "no-mixed-operators": 0, "no-mixed-spaces-and-tabs": 2, "no-multi-assign": 0, "no-multi-str": 0, "no-new": 0, "no-param-reassign": 0, "no-plusplus": 0, "no-prototype-builtins": 0, "no-redeclare": 0, "no-restricted-globals": 0, "no-restricted-syntax": 0, "no-shadow": 0, "no-template-curly-in-string": 0, "no-undef": 0, "no-undef-init": 0, "no-underscore-dangle": 0, "no-unused-expressions": 0, "no-unused-vars": [ "warn", { "argsIgnorePattern": "^_" } ], "no-use-before-define": 0, "no-useless-concat": 0, "no-useless-constructor": 0, "no-useless-escape": 0, "no-useless-return": 0, "no-var": "error", "object-shorthand": 0, "one-var": 0, "one-var-declaration-per-line": 0, "operator-assignment": 0, "prefer-arrow-callback": 0, "prefer-const": "warn", "prefer-destructuring": 0, "prefer-rest-params": 0, "prefer-spread": 0, "prettier/prettier": "off", "quote-props": 0, "quotes": [ "error", "single", { "avoidEscape": true } ], "react-hooks/exhaustive-deps": "warn", "react-hooks/rules-of-hooks": "error", "react/jsx-sort-props": [ "warn", { "callbacksLast": true, "ignoreCase": true, "noSortAlphabetically": false, "reservedFirst": true, "shorthandFirst": true } ], "react/jsx-uses-react": "off", "react/no-unescaped-entities": "off", "react/prop-types": "off", "react/react-in-jsx-scope": "off", "semi": ["error", "always"], "simple-import-sort/exports": "warn", "simple-import-sort/imports": "off", "sonarjs/cognitive-complexity": 0, "sonarjs/prefer-optional-chain": 0, "sort-imports": "off", "sort-keys": [ "warn", "asc", { "caseSensitive": false, "natural": true } ], "sort-keys-fix/sort-keys-fix": [ "warn", "asc", { "caseSensitive": false, "natural": true } ], "vars-on-top": 0 }, "settings": { "import/resolver": { "node": { "extensions": [".js", ".jsx", ".ts", ".tsx", ".astro", ".mjs"], "moduleDirectory": ["node_modules", "src/"] }, "typescript": { "project": "./tsconfig.json" } }, "react": { "version": "detect" } }}Stylelint
Section titled “Stylelint”npm install --save-dev @archoleat/stylelint-config-extended-scssstylelint-config-prettier-scssstylelint-config-standardstylelint-config-standard-scssstylelint-config-tailwindcssstylelint-declaration-block-no-ignored-propertiesstylelint-declaration-strict-valuestylelint-group-selectorsstylelint-plugin-defensive-cssstylelint-prettierstylelint-scssstylelint-use-nesting{ "arrowParens": "always", "attributeGroups": [ "$CLASS", "^(id|name)$", "$FOR", "$TYPE", "$VALUE", "data-min", "data-max", "data-min-formatted", "data-max-formatted", "$HREF", "$SRC", "$TITLE", "$ROLE", "$TARGET", "$REL", "$ALT", "data-mdb-img", "data-sizes" ], "attributeSort": "ASC", "bracketSameLine": true, "bracketSpacing": true, "embeddedLanguageFormatting": "auto", "endOfLine": "lf", "experimentalOperatorPosition": "end", "experimentalTernaries": false, "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxSingleQuote": false, "objectWrap": "preserve", "organizeImportsSkipDestructiveCodeActions": true, "overrides": [ { "files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.mjs"], "options": { "experimentalTernaries": true, "parser": "babel-ts" } }, { "files": ["*.handlebars", "*.hbs"], "options": { "parser": "glimmer", "singleQuote": false } }, { "files": "*.html", "options": { "embeddedLanguageFormatting": "off", "htmlWhitespaceSensitivity": "strict", "parser": "html", "printWidth": 2000, "singleAttributePerLine": true, "singleQuote": false } }, { "files": "*.md", "options": { "embeddedLanguageFormatting": "auto", "htmlWhitespaceSensitivity": "ignore", "jsxSingleQuote": true, "parser": "markdown", "vueIndentScriptAndStyle": false } }, { "files": "*.mdx", "options": { "embeddedLanguageFormatting": "auto", "htmlWhitespaceSensitivity": "css", "jsxSingleQuote": true, "parser": "mdx", "vueIndentScriptAndStyle": true } }, { "files": ["*.scss", "*.less", "*.sass", "*.css"], "options": { "parser": "scss", "printWidth": 200 } }, { "files": ["*.json", "*.jsonc"], "options": { "parser": "json", "trailingComma": "none" } }, { "files": ["*.yaml", "*.yml"], "options": { "parser": "yaml", "tabWidth": 2 } }, { "files": ["*.astro"], "options": { "parser": "astro" } }, { "files": ["*.vue"], "options": { "bracketSameLine": false, "parser": "vue", "printWidth": 80, "singleQuote": false, "tabWidth": 2, "vueIndentScriptAndStyle": false } } ], "plugins": [ "prettier-plugin-organize-imports", "prettier-plugin-organize-attributes", "prettier-plugin-tailwindcss-extra-plus", "prettier-plugin-tailwindcss" ], "printWidth": 120, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": true, "singleAttributePerLine": false, "singleQuote": true, "tabWidth": 4, "tailwindConfig": "tailwind.config.js", "tailwindStylesheet": "./assets/scss/tailwindv4.css", "trailingComma": "all", "useTabs": false, "vueIndentScriptAndStyle": true}"react/jsx-sort-props": [ "warn", { "callbacksLast": true, "ignoreCase": true, "noSortAlphabetically": false, "reservedFirst": true, "shorthandFirst": true }],"sort-keys": [ "warn", "asc", { "caseSensitive": false, "natural": true }],"sort-keys-fix/sort-keys-fix": [ "warn", "asc", { "caseSensitive": false, "natural": true }],