Last active
September 26, 2020 13:35
-
-
Save barryblando/d6753c07324fac302c5a01d39bee4397 to your computer and use it in GitHub Desktop.
VSCode Setup Prettier + ESLint + StyleLint for React
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"extends": [ | |
"airbnb", | |
"prettier", | |
"prettier/react" | |
], | |
"parser": "babel-eslint", | |
"parserOptions": { | |
"ecmaVersion": 8, | |
"ecmaFeatures": { | |
"experimentalObjectRestSpread": true, | |
"impliedStrict": true, | |
"classes": true | |
} | |
}, | |
"env": { | |
"browser": true, | |
"node": true, | |
"jquery": true, | |
"jest/globals": true | |
}, | |
"rules": { | |
"no-unused-vars": [ | |
1, | |
{ | |
"argsIgnorePattern": "props|res|next|^err" | |
} | |
], | |
"import/no-extraneous-dependencies": [ | |
"error", | |
{ | |
"devDependencies": [ | |
"src/**/*.js", | |
"buildScripts/**/*.js", | |
"src/__tests__/**", | |
"**/__tests__/**", | |
"*.js" | |
], | |
"optionalDependencies": false, | |
"peerDependencies": false | |
} | |
], | |
"react/jsx-filename-extension": [ | |
1, | |
{ | |
"extensions": [ | |
".js", | |
".jsx" | |
] | |
} | |
], | |
"arrow-body-style": [ | |
2, | |
"as-needed" | |
], | |
"no-param-reassign": [ | |
2, | |
{ | |
"props": false | |
} | |
], | |
"no-console": [ | |
"warn" | |
], | |
"no-var": [ | |
"error" | |
], | |
"import/prefer-default-export": 0, | |
"import": 0, | |
"func-names": 0, | |
"space-before-function-paren": 0, | |
"comma-dangle": 0, | |
"max-len": 0, | |
"import/extensions": 0, | |
"no-underscore-dangle": 0, | |
"consistent-return": 0, | |
"react/display-name": [ | |
1, | |
{ | |
"ignoreTranspilerName": false | |
} | |
], | |
"react/react-in-jsx-scope": 0, | |
"react/prefer-stateless-function": [ | |
1, | |
{ | |
"ignorePureComponents": true | |
} | |
], | |
"react/forbid-prop-types": 0, | |
"react/prop-types": 0, | |
"react/no-unescaped-entities": 0, | |
"jsx-a11y/accessible-emoji": 0, | |
"radix": 0, | |
"no-shadow": [ | |
2, | |
{ | |
"hoist": "all", | |
"allow": [ | |
"resolve", | |
"reject", | |
"done", | |
"next", | |
"err", | |
"error" | |
] | |
} | |
], | |
"quotes": [ | |
2, | |
"single", | |
{ | |
"avoidEscape": true, | |
"allowTemplateLiterals": true | |
} | |
], | |
"prettier/prettier": [ | |
"error", | |
{ | |
"trailingComma": "es5", | |
"singleQuote": true, | |
"printWidth": 120 | |
} | |
], | |
"jsx-a11y/href-no-has": "off", | |
"jsx-a11y/anchor-is-valid": [ | |
"warn", | |
{ | |
"aspects": [ | |
"invalidHref" | |
] | |
} | |
] | |
}, | |
"plugins": [ | |
"prettier", | |
"jest" | |
] | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"extends": [ | |
"stylelint-scss", | |
"stylelint-config-recommended" | |
], | |
"rules": { | |
"at-rule-no-unknown": [ | |
true, | |
{ | |
"ignoreAtRules": ["extends", "ignores"] | |
} | |
], | |
"indentation": 2, | |
"unit-whitelist": ["em", "rem", "s", "%", "px"], | |
"block-closing-brace-newline-after": "always" | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
You don't need to remove Prettier extension, you may need it with other files like HTML, CSS ... | |
just add this line to Visual Studio Code settings (eslint for js&scss and prettier for the rest): | |
{ | |
"[javascript]": { | |
"editor.formatOnSave": false // turn off prettier on js and scss file | |
}, | |
"[scss]": { | |
"editor.formatOnSave": false | |
}, | |
"files.associations": { | |
"*.js": "javascript" | |
}, | |
"prettier.disableLanguages": ["js"], // disable prettier when it comes to javascript | |
"editor.formatOnSave": true, | |
"files.autoSave": "onFocusChange", | |
"eslint.autoFixOnSave": true, | |
"eslint.alwaysShowStatus": true, | |
"stylelint.enable": true | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
settings.js
"eslint.autoFixOnSave": true,
is deprecated use this instead