I'm trying to enable formatting on save in VSCode in a Gatsby project, per the Gatsby docs: https://www.gatsbyjs.org/tutorial/part-zero/#install-the-prettier-plugin
I also tried setting up eslint so now I have:
{
"env": {
"browser": true,
"es6": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["prettier"],
"rules": { "prettier/prettier": "error" },
"extends": ["airbnb", "prettier", "prettier/react"],
"settings": {
"import/core-modules": ["react"]
}
}
in my .eslintrc.json and
{
"endOfLine": "lf",
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
in my .prettierrc.
I have Format on save, on paste, and on type enabled in both my User Settings and my Workspace settings and it appears to work in my .eslintrc.json and in a .css file, but not with the Gatsby components (Header.js, Layout.js, etc). I can format these component files by opening the command palette and manually clicking 'Format Document,' but not automatically on save.
Related
Prettier warns me that I need to remove trailing commas, then after I remove it the error goes away but Prettier adds that commas again by itself immediately I save. Please help, it seems like a conflict between Prettier and ESLint:
.eslintrc
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"react-app",
"react-app/jest",
"airbnb",
"airbnb-typescript",
"plugin:import/typescript",
"plugin:prettier/recommended",
"prettier"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["react", "#typescript-eslint", "prettier"],
"rules": {}
}
.prettierrc
{
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "all",
"printWidth": 80
}
If you want prettier not to add trailing commas, change your .prettierrc to "trailingComma": "none" - if you want eslint to not warn you about trailing commas, add "comma-dangle": "off" to the rules object in your eslintrc
I'm setting up an environment this way to work with a ReactJs/Next.js project that uses 'styled jsx', but eslint can't fix the css flaws in the middle of the code.
How can I best configure eslint to work with the project I'm working on?
{
"parser": "#babel/eslint-parser",
"extends": [
"airbnb",
"plugin:react/recommended"
],
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
},
"settings": {
"import/core-modules": ["styled-jsx", "styled-jsx/css"],
},
"plugins": [
"react",
"react-hooks"
],
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
},
"rules": {
// ..rules
}
}
Check this out:
https://github.com/vercel/styled-jsx#eslint
If you're using eslint-plugin-import, the css import will generate errors, being that it's a "magic" import (not listed in package.json). To avoid these, simply add the following line to your eslint configuration:
"settings": {"import/core-modules": ["styled-jsx/css"] }
This should remove any errors - but you won't get highlighting.
Here you can see I have a very simple react component, but the eslint rule is giving me a false positive.
Config Details
package.json
"devDependencies": {
"eslint": "^5.13.0",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.0.1",
}
.eslintrc.js
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"react-hooks"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
],
"react-hooks/rules-of-hooks": "error"
},
"settings": {
"react": {
"createClass": "createReactClass", // Regex for Component Factory to use, default to "createReactClass"
"pragma": "React", // Pragma to use, default to "React"
"version": "detect", // React version. "detect" automatically picks the version you have installed. You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
},
"linkComponents": [
// Components used as alternatives to <a> for linking, eg. <Link to={ url } />
"Hyperlink",
{ "name": "Link", "linkAttribute": "to" }
]
}
};
ESLint doesn't know React semantics for variable usage in JSX by default. To fix this, I could either enable the react/jsx-uses-vars rule or extend from plugin:react/recommended configuration. I went with the latter.
"extends": ["eslint:recommended", "plugin:react/recommended"]
I just installed ESLint to React Native (create-react-native-app)
.eslintrc.json
{
"env": {
"browser": true,
"es6": true,
"react-native/react-native": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 8,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react",
"react-native"
],
"rules": {
"no-var": "error",
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 2,
"react-native/no-color-literals": 2,
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
}
It's lint everything properly, BUT not my components.
So my folder structure looks something like:
root:
src
components
contants
...
The linter working in the editor (Sublime), BUT not in the Command Line (iTerm2)
Using eslint it is possible to do eslint ./src to validate whole folder.
My .eslintrc looks like this and I am using flow:
{
"extends": [
"plugin:flowtype/recommended",
"plugin:react/recommended",
"prettier",
"prettier/flowtype",
"prettier/react"
],
"plugins": [
"flowtype",
"react",
"prettier"
],
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"node": true
},
"rules": {
"prettier/prettier": ["error", {
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"parser": "flow"
}]
},
"settings": {
"flowtype": {
"onlyFilesWithFlowAnnotation": true
}
}
}
I am still getting react react/prop-types even though I am using flow.
Is this correct and should I just turn them off?
PropTypes are for runtime type checking, while Flow is for static type checking. Both serve their own purpose, not all type errors can be caught during compilation, so PropTypes helps you with those; Flow can catch some errors early - before you interact with your app, or even load it to the browser.