score:2
Accepted answer
- install eslint:
npm i --save-dev eslint
- init eslint:
for some options you need choose next:npx eslint --init
- how would you like to use eslint?
- to check syntax and find problems
- what format do you want your config file to be in?
- javascript
- install prettier:
npm i --save-dev eslint-config-prettier eslint-plugin-prettier prettier
- create
.prettierrc
config file:{ "printwidth": 80, "singlequote": true, "trailingcomma": "es5" }
at now you can check style with eslint and fix style with prettier from comand line.
for vscode integration with eslint and prettier you need to install one of:
after that you need to set this extension as default formatter:
- open command pallette
ctrl+shift+p
; - select
format document with...
; - select
configure document with...
; - select
prettier - code formatter
oreslint
based on your preferences.
now, eslint will work as linter and prettier as formatter:
if i save file all prettier problems will be fixed (autoformat on save should be turned on)
eslint plugin does not apply automatically changes in settings located in
.prettierrc
. see issue on github. to fix this you can:
- move
.prettierrc
content in .eslint (not recommended because prettier plugins sometimes do not read this file);- run from command pallette in vscode
eslint: restart eslint server
after edit .prettierrc
file.
Source: stackoverflow.com
Related Query
- Prettier doesn't format based on my eslint config
- How to config ESLint for React on Atom Editor
- Prettier doesn't format .tsx file
- ESLint with Arbnb config and Facebook Flow together
- Prettier react/jsx-max-props-per-line format with VSCode
- How to configure Prettier to format Styled Components conditional rendering
- ESLint error - ESLint couldn't find the config "react-app"
- Eslint config error. ESLint couldn't find the config "dev" to extend from
- Eslint and prettier conflict on operator-linebreak rule
- Eslint cannot read config file
- Reactjs Render component dynamically based on a JSON config
- Trouble building react-webapp with ESLint; ESLint couldn't find the config "developit" to extend from
- Disable quote rule in Eslint config file
- What is Prettier keyboard shortcut command in VS Code to format only a block of React code, not just format on file autosave?
- Prettier / ESLint / React
- dynamicly import modules based on webpack config or cli params
- Dynamically import component in React based on config entries
- Eslint jsx-curly-spacing specific format
- block eslint and prettier from reformatting closing brackets on HTML elements
- How do I make ESlint less stringent while working with Prettier in a React project (with Material-UI)?
- ESlint + Prettier for JSX
- variable config file based on environment - reactjs, webpack
- Is there any way I can get the format of date based on locale?
- Proper way of Installing ESlint with Prettier in a React Project
- How do I configure Prettier format usable React code?
- How to prevent converting 0.00 to 0.0 by prettier eslint automatically
- How to reformat a JSON array into another format "grouping" based on different keys
- How to fix prettier config in vuexy project with react?
- How to run prettier in browser to format code? e.g. inside ReactJs app
- Error - ESLint: 7.32.0 ESLint couldn't find the config "standard" to extend from
More Query from same tag
- Event is passed as `undefined` while using <ButtonGroup> of react-bootstrap
- Accessing realtime firebase object in react.js
- How do I fetch data in React.Component class through Context API?
- Keep query strings with AWS Amplify Hosting - React
- React Router - OnClick not processing in Navlink
- React-router "Cannot GET /*" except for root url
- Unexpected token import at routes.js
- How to properly change the boolean inside of object in array?
- Style div in React's jsx as per the id/ class name, which will check condition
- If I'm using the same react/redux component twice, will they share state?
- What is the difference between func() => {} and func = () => {} in class?
- Highlight a word in a row of a table in Reactjs
- React | Node application | Docker deployment
- Keydown Play Audio with React
- ReactJS Uncaught ReferenceError: onSubmit is not defined
- React Material UI DataGrid: Cannot read property 'useRef' of undefined
- Is there a way to disable apollo-link-dedup when using apollo useQuery?
- How to render post in different layout getting from same parent component in reactjs
- React - Subsequent variable declarations must have the same type
- ReactJS TypeError: Cannot read property 'value' of undefined
- fetch send the data but doesn't go in then, React
- Unexpected token < when using reactjs app
- Functional component chaining multiple filters and sorting of an array
- Graphql subscription not working from react localhost client
- Canvas flickering when reactjs re-renders
- How to test decorated React component with shallow rendering
- Fetch not giving me the response
- Disable the next button until the form is filled using Reactjs
- Losing dropdown select options upon filtering using react context api
- Material-UI TextField variant label striking through value