ESlint Config
Bigcommerce Install
Section titled “Bigcommerce Install”npm i --save-dev eslint@^8.2.0 eslint-plugin-react@^7.28.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 eslint-config-airbnb-base@latest eslint-config-prettier eslint-plugin-prettier @babel/core @babel/eslint-parser @typescript-eslint/eslint-plugin@latest @babel/preset-env @babel/preset-react
.eslint.json
Section titled “.eslint.json”cat > .eslint.json <<EOF{ "env": { "browser": true, "es2021": true, "es2022": true, "es6": true, "jest": true, "jquery": true, "node": true }, "extends": [ "airbnb-base", "eslint:recommended", "prettier", "plugin:prettier/recommended", "plugin:react/recommended" ], "globals": { "$": true, "jQuery": true }, "overrides": [ { "files": ["*.mdx"], "parser": "eslint-mdx", "rules": { "@typescript-eslint/no-unused-vars": "off", "no-unused-expressions": "off", "react/jsx-no-undef": "off", "semi": "off" } }, { "files": ["*.astro"], "parser": "astro-eslint-parser", "parserOptions": { "extraFileExtensions": [".astro"], "jsx": true, "parser": "@typescript-eslint/parser" }, "rules": { "astro/no-conflict-set-directives": "error", "astro/no-unused-define-vars-in-style": "error", "jsx-a11y/anchor-is-valid": "off", "jsx-a11y/heading-has-content": "off", "jsx-a11y/no-noninteractive-element-to-interactive-role": "off", "react/no-unknown-property": "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"] }, { "files": ["src/scripts/tw-elements.js"], "parser": "espree", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" } }, { "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": "@babel/eslint-parser", "parserOptions": { "babelOptions": { "presets": ["@babel/preset-env", "@babel/preset-react"] }, "ecmaFeatures": { "jsx": true }, "ecmaVersion": "latest", "extraFileExtensions": [".mdx"], "requireConfigFile": false, "sourceType": "module" }, "plugins": ["@typescript-eslint", "prettier", "react", "react-hooks", "jsx-a11y"], "root": true, "rules": { "@typescript-eslint/consistent-type-imports": "off", "@typescript-eslint/no-explicit-any": "warn", "@typescript-eslint/no-shadow": "warn", "@typescript-eslint/no-unused-vars": [ "warn", { "argsIgnorePattern": "^_", "destructuredArrayIgnorePattern": "^_", "varsIgnorePattern": "^_" } ], "@typescript-eslint/no-use-before-define": "error", "@typescript-eslint/no-var-requires": "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": 0, "import/extensions": [ "error", "ignorePackages", { "astro": "always", "js": "never", "json": "always", "jsx": "never", "mdx": "never", "ts": "never", "tsx": "never" } ], "import/first": 0, "import/no-cycle": 0, "import/no-named-as-default": 0, "import/no-named-as-default-member": 0, "import/no-unresolved": [ "error", { "ignore": [ "@astrojs/image/components", "^astro:", "^@/", "astro/config", "@astrojs/react", "@astrojs/tailwind", "@astrojs/cloudflare", "@astrojs/partytown", "@astrojs/mdx" ] } ], "import/order": "off", "sort-imports": "off", "import/prefer-default-export": "off", "simple-import-sort/imports": "off", "simple-import-sort/exports": "warn", "jsx-a11y/anchor-is-valid": [ "error", { "aspects": ["invalidHref", "preferButton"], "components": ["Link"], "specialLink": ["to", "hrefLeft", "hrefRight"] } ], "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": "off", "no-template-curly-in-string": 0, "no-undef": 0, "no-undef-init": 0, "no-underscore-dangle": 0, "no-unused-expressions": 0, "no-unused-vars": "off", "no-use-before-define": "off", "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": [ "error", { "printWidth": 120, "singleQuote": true, "tabWidth": 4, "trailingComma": "all" } ], "quote-props": 0, "quotes": [ "error", "single", { "avoidEscape": true } ], "react-hooks/exhaustive-deps": "warn", "react-hooks/rules-of-hooks": "error", "react/no-unescaped-entities": "off", "react/prop-types": "off", "react/react-in-jsx-scope": "off", "semi": ["error", "always"], "sonarjs/cognitive-complexity": 0, "sonarjs/prefer-optional-chain": 0, "vars-on-top": 0 }, "settings": { "import/resolver": { "node": { "extensions": ["*.js", "*.jsx", "*.ts", "*.tsx", "*.cjs", "*.mjs", ".astro"] } }, "mdx": { "code-blocks": true }, "react": { "version": "detect" } }}EOF
npm install --save-dev eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier-eslint eslint-plugin-astro eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-mdx eslint-plugin-mdx
npm i --save-dev eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier-eslint
npm i --save-dev eslint eslint-plugin-astro
npm i --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks
Typescript
Section titled “Typescript”npm i --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i --save-dev eslint eslint-mdx eslint-plugin-mdx
.eslintrc.json
Section titled “.eslintrc.json”cat > .eslintrc.json <<EOF{ "env": { "browser": true, "es2021": true, "es2022": true, "es6": true, "jest": true, "jquery": true, "node": true }, "extends": [ "plugin:jsx-a11y/recommended", "airbnb-base", "eslint:recommended", "prettier", "plugin:react-hooks/recommended", "plugin:@typescript-eslint/recommended", "plugin:astro/recommended", "plugin:react/recommended", "plugin:mdx/recommended", "plugin:prettier/recommended" ], "globals": { "$": true, "jQuery": true }, "overrides": [ { "files": ["*.mdx"], "parser": "eslint-mdx", "rules": { "@typescript-eslint/no-unused-vars": "off", "no-unused-expressions": "off", "react/jsx-no-undef": "off", "semi": "off" } }, { "files": ["*.astro"], "parser": "astro-eslint-parser", "parserOptions": { "extraFileExtensions": [".astro"], "jsx": true, "parser": "@typescript-eslint/parser" }, "rules": { "astro/no-conflict-set-directives": "error", "astro/no-unused-define-vars-in-style": "error", "jsx-a11y/anchor-is-valid": "off", "jsx-a11y/heading-has-content": "off", "jsx-a11y/no-noninteractive-element-to-interactive-role": "off", "react/no-unknown-property": "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"] }, { "files": ["src/scripts/tw-elements.js"], "parser": "espree", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" } }, { "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": [".mdx"], "requireConfigFile": false, "sourceType": "module" }, "plugins": ["@typescript-eslint", "prettier", "react", "react-hooks", "jsx-a11y"], "root": true, "rules": { "@typescript-eslint/consistent-type-imports": "off", "@typescript-eslint/no-explicit-any": "warn", "@typescript-eslint/no-shadow": "warn", "@typescript-eslint/no-unused-vars": [ "warn", { "argsIgnorePattern": "^_", "destructuredArrayIgnorePattern": "^_", "varsIgnorePattern": "^_" } ], "@typescript-eslint/no-use-before-define": "error", "@typescript-eslint/no-var-requires": "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/no-cycle": 0, "import/no-named-as-default": 0, "import/no-named-as-default-member": 0, "import/no-unresolved": [ "error", { "ignore": [ "@astrojs/image/components", "^astro:", "^@/", "astro/config", "^@astrojs/", "@astrojs/react", "@astrojs/tailwind", "@astrojs/cloudflare", "@astrojs/partytown", "@astrojs/mdx", "@astrojs/sitemap", "@astrojs/starlight", "@astrojs/vite", "@tailwindcss/vite", "@astrojs/starlight/components/Content", "@astrojs/starlight/components/PageFrame", "@astrojs/starlight/components/PageTitle", "@astrojs/starlight/components/Sidebar" ] } ], "import/order": "off", "sort-imports": "off", "import/prefer-default-export": "off", "simple-import-sort/imports": "off", "simple-import-sort/exports": "warn", "jsx-a11y/anchor-is-valid": [ "error", { "aspects": ["invalidHref", "preferButton"], "components": ["Link"], "specialLink": ["to", "hrefLeft", "hrefRight"] } ], "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": "off", "no-template-curly-in-string": 0, "no-undef": 0, "no-undef-init": 0, "no-underscore-dangle": 0, "no-unused-expressions": 0, "no-unused-vars": "off", "no-use-before-define": "off", "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": [ "error", { "printWidth": 120, "singleQuote": true, "tabWidth": 4, "trailingComma": "all" } ], "quote-props": 0, "quotes": [ "error", "single", { "avoidEscape": true } ], "react-hooks/exhaustive-deps": "warn", "react-hooks/rules-of-hooks": "error", "react/no-unescaped-entities": "off", "react/prop-types": "off", "react/react-in-jsx-scope": "off", "semi": ["error", "always"], "sonarjs/cognitive-complexity": 0, "sonarjs/prefer-optional-chain": 0, "vars-on-top": 0 }, "settings": { "import/resolver": { "node": { "extensions": ["*.js", "*.jsx", "*.ts", "*.tsx", "*.cjs", "*.mjs", ".astro"] } }, "mdx": { "code-blocks": true }, "react": { "version": "detect" } }}EOF
.eslintignore
Section titled “.eslintignore”cat > .eslintignore <<EOFdist/.output/.astro/node_modules/public/.cache/*.d.tsEOF