Build a Modern JS Project - #3 ESLint, Prettier & EditorConfig
Вставка
- Опубліковано 15 вер 2024
- In this series, we'll go through the process of developing, publishing, and deploying a small React library with CSS spinners. Our idea fits very well with React's component-based philosophy, as each spinner is going to be a stand-alone unit that will encapsulate its own styling and markup. By the same token, this will also open doors to explore tree shaking and unit testing.
To kick start the development, we'll create a GitHub repo and initialize an NPM project. From there, we'll start going through the stages of the build process discussed in the previous video • Build a Modern JS Proj... This time around, we'll dive into linting.
First, we'll create an EditorConfig file that will serve as a fallback for an editor or IDE. Note that while IDEs like IntelliJ already have support for EditorConfig built-in, with text editors like VS Code, Sublime, or Atom you'd need to install an EditorConfig extension/plugin yourself in order for the config to take effect. See editorconfig.org
Not every developer will have EditorConfig installed or enabled. Some might be old-school and into Vim or Emacs. While EditorConfig covers the essentials of a coding style, we'd need a more sophisticated linter to enforce stricter rules. This is where ESLint comes into play. I am a staunch supporter of StandardJS style standardjs.com so as usual, I'll go with it when setting up ESLint. Feel free to pick Airbnb or any other of your choice.
ESLint can catch many deviations from the style guide, but it can't automatically fix every error. Most often, these are formatting typos or dangling semicolons. The right tool for this job is Prettier. ESLint has a straightforward integration with Prettier prettier.io/do... However, it involves extra effort when setting up. By far the easiest and cleanest route to get both to work in tandem is prettier-eslint github.com/pre...
It's extremely easy to set up, and it retains most of rules from StandardJS. Nonetheless, if you want to go with the former, you can still install eslint-plugin-prettier and eslint-config-prettier, then configure the plugins, rewrite semicolons and single quotes via prettierconfig, and... Still end up with things like github.com/pre... in the end. I found it frustrating that I couldn't just go with Standard out of the box. Who has time to argue about spaces anyway? Judging by the thumbs up/down on the issue, people still do. Anyhow, I went with prettier-eslint and never looked back.
Finally, we'll configure VS Code specific workspace settings, such that any file in the project will be auto-formatted on save. Make sure that you have Prettier github.com/pre... extension installed. It's also worthwhile to install ESLint with it as well, so you'll get warnings as you type. The plugin will analyze our code based on the eslintconfig at the root of the project.
ESLint vs Prettier? (hint: linter vs formatter) prettier.io/do...
Why not set up ESLint and Prettier separately? Here's why github.com/pre...
Don't forget to check out the repo on GitHub github.com/ale...
I don't usually comment YT videos, but right now I do! Lol bro you are awesome! Keep doing this stuff, it's awesome! :) I'm waiting for next videos from this series
very very well done, clear and step by step
the new npx eslint ---init does not have standard options, it looks nothing like what you are doing. Also the options are react and vue.js. with neither working to set the dependencies with npm
I just started a new project yesterday with no problems. First, make sure you have a package.json file (npm init -y), then run npx eslint --init -> To check syntax, find probems, and enforce code style -> JavaScript modules (import/export) -> React (or other) -> Browser (or Node, or both) -> Use a popular style guide -> Standard -> JSON (or other) -> Y (install deps)
@@CodeRealm I used atom and the terminal in there seems to be working thanks. for your tutorial
the ' ' cause problems with windows. It is not needed at line 9 and 10 there about when dealing with lint
Good call. The quotes around the glob pattern are only needed on Mac/Linux. Are double quotes causing issues on Windows as well?
@@CodeRealm on windows you do not need to write the line as follows "lint:fix: "prettier-eslint '**/*.js' --write" you can leave the single quotes out. it should be lint:fix: "prettier-eslint **/*.js --write"
Thanks for the great videos!
Super nice series but things change rather fast in the javascript world. Currently, the vscode settings dont format on save. prettier.eslintIntegration seems to be deprecated
So it's just eslint.autoFixOnSave now since the last major release. Good to know!
Thanks for these videos man! But eslint and prettier commands are not working any more :(
good tips. recently i started using vscode's jsconfig
as of 2020, I think we now can use `prettier` instead of `prettier-eslint`, otherwise it will throw error messages like `prettier-eslint command not found`
If you are getting `prettier-eslint command not found`, you need to install prettier-eslint-cli. I would no longer use it myself as it doesn't support TypeScript, but it still gets the job done for JS projects.
I really appreciate this tutorial, don't get me wrong - and I know you are just documenting your process and everything - someone might not want to have an auto-run script to prettify on save.
Nonetheless do you sometimes stop and go: 'hold on a second all of these plugins and snap-ins I have to use for every part of this process is getting kind of ridiculous?' I think I would, maybe it's just part of JavaScript development
Sure, I feel for the people that are just starting out and are overwhelmed by the JS ecosystem. At the same time, these things (esp. tooling) are fairy simple. As you use them, they become second nature. And if your team is small, perhaps you don't use them, and maybe you don't need to. Great. At the end of the day, it's about delivering a product and making money. Whether you use a linter, prettifier, transpiler, bundler, etc. is up to you/your team. You decide if it makes you more productive.
Seems to be, that eslint version newer than 6.0.0 has some hick-ups with using it in npm script with '*/**/*.js' as parameter (any wildcard).
Tried the same, but code did not auto corrected inside the index.js file?
Good stuff!
Anyone watching this video needs to read this as well. This is the 2020 version of what he sets up over videos one to three of this series.
workellence.io/how-to-eslint-prettier-and-editorconfig-for-react-projects-from-scratch
I spent hours adjusting his setup until I found this link. Happy coding!
What a great playlist Alex! Tks for sharing! Out of curiosity, what operating system are you using? Terminal configuration, etc? .dot files?
Thanks! Currently, Ubuntu 19.04, switching to 20.04 once it's out. Nothing fancy about the terminal, just the default one with about 25% transparency. I tend to stick with the defaults and usually only tweak the barebones settings like the display of date and time, etc.
good job bro
Top content
Hey again, just following this tutorial through now, when using eslint with the current release there is a recommended default setting which flags calls to the console as invalid, did you disable this or was this not the case in your eslint configuration?
Are you referring to no-console rule? I prefer to stick with the recommended defaults of the style guide that I am extending (Standard), rather than micromanage each rule individually. From what I know though, Airbnb guide exposes many more atomic rules that you can tweak to your liking.
@@CodeRealm Yes sorry I just reinitialised my config for my project to make sure it uses the standardJS rules and I am no longer getting the no-console rule appear - thought I was already using standard and getting a no-console rule appear
Sorry, but this needs to be updated for change to eslint --init menu options. Also vscode does not auto correct after setting up the settings.json file.
I believe the eslint questionnaire is mostly the same. You can still get the same results as in the vid. Not sure why the auto-correct didn't work for you though - you may want to check with the repo github.com/alex996/react-css-spinners
Does it work with CRA? Thanks
I believe CRA uses its own config under eslint-config-react-app as it's specified in package.json. You can remove it and use your own if you prefer.
fellowship
prettier.eslintIntegration is deprecated now.
True that, I updated the repo, but things keep changing. The latest deprecation is eslint.autoFixOnSave. I still haven't got to update my projects.
@@CodeRealm I just left message for others so they have no surprise. But yeah, recently there are several new changes.
Wow.