Skip to content

Instantly share code, notes, and snippets.

@rsstdd

rsstdd/.editorconfig

Created September 1, 2021 22:23
Show Gist options
  • Save rsstdd/a3982cf777706bf47e8ec9db91fafaa1 to your computer and use it in GitHub Desktop.
Save rsstdd/a3982cf777706bf47e8ec9db91fafaa1 to your computer and use it in GitHub Desktop.
Download ZIP
2021 TS + Webpack + Eslint + Prettier
Raw
.editorconfig
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
quote_type = single
max_line_length = 80
[*.md]
trim_trailing_whitespace = false
[*.{ts,tsx,js,jsx,css,scss,package.json,.*rc,*.yml}]
indent_size = 2
indent_style = space
Raw
.eslintignore
*.test.js
node_modules
__mocks
.next
*.min.js
dist
public
coverage
build
__snapshots__
**/*.js
Raw
.eslintrc.js
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
parserOptions: {
sourceType: 'module',
project: ['./.tsconfig.eslint.json'],
ecmaVersion: 'ESNext',
ecmaFeatures: {
jsx: true,
},
allowAutomaticSingleRunInterface: true,
tsconfigRootDir: __dirname,
warnOnUnsupportedTypeScriptVersion: false,
},
settings: {
react: {
version: 'detect',
},
},
plugins: [
'eslint-plugin',
'@typescript-eslint',
'eslint-comments',
'promise',
'simple-import-sort',
'prettier',
'react-hooks',
],
extends: [
'next',
'next/core-web-vitals',
// 'airbnb-typescript',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'plugin:eslint-comments/recommended',
'plugin:promise/recommended',
'plugin:prettier/recommended',
'prettier',
],
env: {
node: true,
browser: true,
commonjs: true,
es6: true,
},
rules: {
'@typescript-eslint/ban-ts-comment': [
'error',
{
'ts-expect-error': 'allow-with-description',
'ts-ignore': true,
'ts-nocheck': true,
'ts-check': false,
minimumDescriptionLength: 5,
},
],
'react/prop-types': 'off',
'no-use-before-define': 'off',
'jsx-a11y/anchor-is-valid': [
'error',
{
components: ['Link'],
specialLink: ['hrefLeft', 'hrefRight'],
aspects: ['invalidHref', 'preferButton'],
},
],
'@typescript-eslint/explicit-function-return-type': 'off',
'prettier/prettier': ['error', {}, { usePrettierrc: true }],
'jsx-a11y/label-has-for': 'off', // Deprecated
'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
'react-hooks/exhaustive-deps': 'error', // Checks effect dependencies
'react/require-default-props': 0,
'react/react-in-jsx-scope': 'off',
'react/jsx-props-no-spreading': 'off',
},
}
Raw
.gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
dist
.env
Raw
.prettierrc.js
module.exports = {
arrowParens: 'avoid',
endOfLine: 'lf',
bracketSpacing: true,
jsxBracketSameLine: false,
jsxSingleQuote: true,
quoteProps: 'as-needed',
semi: false,
singleQuote: true,
tabWidth: 2,
trailingComma: 'all',
useTabs: false,
printWidth: 80,
proseWrap: "preserve",
overrides: [
{
files: '*.scss',
options: {
singleQuote: true,
},
},
],
}
Raw
.stylelintrc.js
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
plugins: ['stylelint-scss', 'stylelint-order'],
ignoreFiles: [
'./src/styles/vendor/**',
'./src/styles/generic/_generic.reset.scss',
'./src/styles/generic/_generic.base.scss',
'./src/styles/settings/_settings.colors-variables.scss',
],
rules: {
'no-invalid-position-at-import-rule': null,
'at-rule-no-unknown': null,
'scss/at-rule-no-unknown': true,
'declaration-block-trailing-semicolon': 'always',
'at-rule-empty-line-before': [
'always',
{
ignore: ['first-nested', 'after-comment', 'blockless-after-blockless'],
message:
'Add an empty line before @ rules (except the first nested in a block)',
},
],
'at-rule-no-vendor-prefix': [
true,
{
message:
'Vendor prefixes are not required as they are added with AutoPrefixer',
},
],
'color-hex-case': [
'lower',
{
message:
'Use lowercase letters for hex values - they are easier to distinguish from numbers',
},
],
'color-hex-length': 'short',
'color-named': 'never',
'color-no-hex': [
true,
{
message:
'Hex values should be variables that are stored in variables.scss',
},
],
'declaration-no-important': true,
'function-url-quotes': 'always',
'font-family-name-quotes': 'always-unless-keyword',
'media-feature-name-no-vendor-prefix': true,
'max-nesting-depth': [
4,
{
ignore: ['blockless-at-rules', 'pseudo-classes'],
message: "Don't nest deeper than 4",
},
],
'media-feature-name-case': 'lower',
'number-max-precision': [
2,
{
message: 'Use calc or a function to show where this value comes from',
},
],
'no-duplicate-selectors': true,
'number-leading-zero': 'always',
'order/order': ['custom-properties', 'declarations'],
'order/properties-alphabetical-order': true,
'property-no-vendor-prefix': [
true,
{
severity: 'warning',
},
],
'property-no-unknown': [true, { ignoreProperties: ['composes'] }],
'rule-empty-line-before': [
'always',
{
ignore: ['first-nested', 'after-comment'],
message:
'Add an empty line before rules (except the first nested in a block)',
},
],
'selector-max-id': [
0,
{
message: "Use classes instead of ID's as selectors",
},
],
'selector-max-type': [
0,
{
message: 'Use classes instead of elements as selectors',
},
],
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['export', 'import', 'global', 'local'],
},
],
'selector-pseudo-element-colon-notation': [
'double',
{
severity: 'warning',
},
],
'selector-no-vendor-prefix': true,
'selector-no-qualifying-type': true,
'selector-attribute-quotes': 'always',
'unit-blacklist': [
['px'],
{
message: 'Use rem instead of px values',
},
],
'value-no-vendor-prefix': true,
},
}
Raw
.tsconfig.eslint.json
{
"compilerOptions": {
"allowJs": true,
"noEmit": true,
"types": [
"@types/node"
]
},
"extends": "./.tsconfig.json"
}
Raw
babel.config.js
module.exports = {
plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-nullish-coalescing-operator',
'@babel/plugin-proposal-export-default-from',
'babel-plugin-inline-react-svg',
],
env: {
development: {
presets: ['@babel/preset-typescript', 'next/babel'],
},
production: {
presets: ['@babel/preset-typescript', 'next/babel'],
},
test: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-proposal-class-properties',
'babel-plugin-dynamic-import-node',
],
},
},
}
Raw
lint-staged.config.js
module.exports = {
// Type check TypeScript files
'**/*.(ts|tsx)': () => 'yarn tsc --noEmit',
// Lint and format TypeScript and JS files
'**/*.(ts|tsx|js)': filenames => [
`yarn eslint --fix ${filenames.join(' ')}`,
`yarn prettier --write ${filenames.join(' ')}`,
],
// Format MarkDown and JSON
'**/*.(md|json)': filenames => `yarn prettier --write ${filenames.join(' ')}`,
}
Raw
package.json
{
"name": "",
"version": "0.1.0",
"private": false,
"scripts": {
"format": "prettier --write './src/components/**/*.{ts,tsx,scss,css,json}' './src/pages/**/*.{ts,tsx,scss,css,json}'",
"lint": "eslint ./src/components/** ./src/pages/** -c .eslintrc.js --ext ts,tsx,js,jsx --color",
"lint-diff:ts": "eslint $(git diff origin/master --diff-filter=ACM --name-only -- './src/components/**/*.{ts,tsx,json}')",
"lint-diff:css": "if [[ $(git diff origin/master --diff-filter=ACM --name-only -- './src/**/*.{css|scss}' == true) ]] ; then yarn stylelint $(git diff origin/master --diff-filter=ACM --name-only -- './src/**/*.{css|scss}') ; fi",
"lint-diff": "yarn lint-diff:js && yarn lint-diff:css",
"lint:css": "stylelint './src/styles/**/*.{css|scss}' './src/components/**/*.{css|scss}', './src/pages/**/*.{css|scss}'",
"prepare": "husky install",
"build-lib": "cross-env BABEL_ENV=production babel src -d dist"
},
"dependencies": {
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.4.0-alpha.30",
"@zeit/next-sass": "^1.0.1",
"classnames": "^2.3.1",
"next": "11.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-intersection-observer": "^8.32.0",
"react-transition-group": "^4.4.2",
"webpack": "^5.0.0"
},
"devDependencies": {
"@babel/cli": "^7.14.8",
"@babel/core": "7.13.10",
"@babel/plugin-proposal-export-default-from": "^7.14.5",
"@babel/preset-env": "7.13.10",
"@babel/preset-typescript": "7.13.0",
"@types/debug": "4.1.5",
"@types/node": "^16.4.3",
"@types/react": "^17.0.15",
"@typescript-eslint/eslint-plugin": "^4.29.2",
"@typescript-eslint/parser": "^4.29.2",
"auto": "^10.31.0",
"autoprefixer": "^10.3.1",
"axe-core": "^4.3.2",
"babel-jest": "26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-inline-react-svg": "^2.0.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react-app": "^10.0.0",
"cross-env": "^7.0.3",
"css-loader": "^6.2.0",
"cssnano": "^5.0.7",
"esbuild": "0.9.2",
"eslint": "^7.32.0",
"eslint-config-airbnb-typescript": "12.3.1",
"eslint-config-next": "11.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-formatter-pretty": "4.0.0",
"eslint-plugin": "^1.0.1",
"eslint-plugin-eslint-comments": "3.2.0",
"eslint-plugin-eslint-plugin": "^3.5.3",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jest": "24.2.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-promise": "4.3.1",
"eslint-plugin-react": "7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-unicorn": "28.0.2",
"husky": "^7.0.0",
"import-sort-cli": "6.0.0",
"import-sort-parser-babylon": "6.0.0",
"import-sort-parser-typescript": "6.0.0",
"import-sort-style-module": "6.0.0",
"lint-staged": "^11.1.2",
"npm-run-all": "4.1.5",
"postcss": "^8.3.6",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.3.2",
"resolve-url-loader": "^4.0.0",
"rimraf": "3.0.2",
"sass": "^1.38.0",
"sass-loader": "^8.0.0",
"sort-package-json": "1.49.0",
"style-loader": "^3.2.1",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-recess-order": "^2.5.0",
"stylelint-config-recommended": "^5.0.0",
"stylelint-config-standard": "^22.0.0",
"stylelint-order": "^4.1.0",
"stylelint-prettier": "1.2.0",
"stylelint-scss": "3.19.0",
"typescript": "^4.3.5",
"typescript-plugin-css-modules": "^3.4.0"
},
"browserslist": [
">0.23%",
"iOS >= 9",
"Chrome >= 63",
"safari >= 9",
"IE >= 11"
],
"babel": {
"presets": [
[
"react-app",
{
"absoluteRuntime": false
}
]
]
},
"main": "index.js",
"author": "Ross <[email protected]>",
"license": "MIT",
"repository": ""
}
Raw
postcssrc.js
module.exports = {
plugins: [
'cssnano',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': false,
'nesting-rules': true,
},
},
],
],
}
Raw
renovate.json
{
"extends": [
"config:base"
],
"rangeStrategy": "bump",
"schedule": [
"before 8am every monday"
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment