It's easy to forget that writing code is a creative practice like many others. When working on your application, you have a style. It's not something anyone taught you (some of it like basic syntax sure), but we all have our own ways to indent, write conditional statements, among other things.
How would you explain your style to someone who hasn't seen you code before? Luckily, you don't have to when you use... static analysis tools.
To set up Prettier, you will need to install the package from npm and using the instructions from Prettier Install Docs. This will set you up with a
.prettierrc.json file. In this file is where you will set all the configuration options for your Prettier formatting.
Once the initial setup is done, you can choose which files to ignore by either creating a
.prettierignore file, or inputting which file to use as a base when you run the command using
--ignore-path CLI argument.
To set up eslint, you can go to the getting started page which will show how to create a config file similar to Prettier. It also demonstrates how to set basic rules to get your linting started. More advanced configurations are available but getting started... gets you started.
Similar to Prettier, you can create an
.eslintignore or specify --ignore-path when you run the
npm run eslint command.
- Open package.json
- Create a new property under scripts called
"lint", and set the value to "npm run eslint"
- Save the file and run
npm run lint!
- Create a folder called
.vscodein your project root directory.
- This folder can contain many files, but an example of one is
settings.jsonwhere you can set the rules for your VSCode editor such as auto-format on save, tab indenting, and more.
Mostly, it found spacing and line length issues. For example, when I generated my HTML template string, it split the string into multiple template strings separated by
+. Another thing I noticed was since I specified
"semi": true in the aforementioned config files, it added a couple missing semi-colons to the end of variable declarations.
In terms of indenting/spacing nothing changed because I try to keep a consistent style and I set the rules up to match my own style (since I'm the project owner).
This was a great experience learning how to set up linting and formatting because in the future it will help others work on my project without having to ask how I want it done. I also now know how to set it up for future projects and where to find the setup docs.