Skip to content

Commit a7012ec

Browse files
btholtbtholt
committed
git, format, lint
1 parent be4a2a1 commit a7012ec

File tree

5 files changed

+146
-2
lines changed

5 files changed

+146
-2
lines changed

‎lessons/02-no-frills-react/A-react-without-a-build-step.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: "Brian teaches React without any frills: just you, some JavaScript,
44

55
Let's start by writing pure React. No compile step. No JSX. No Babel. No Webpack or Vite. Just some JavaScript on a page.
66

7-
Let's start your project. Create your project directory. I'm going to call mine `adopt-me` since we're going to be building a pet adoption app throughout this course. Create an index.html and put it into a `src/` directory inside of your project folder. In index.html put:
7+
Let's start your project. Create your project directory. I'm going to call mine `pizza` since we're going to be building a pizza ordering system throughout this course. Create an index.html and put it into a `src/` directory inside of your project folder. In index.html put:
88

99
```javascript
1010
<!DOCTYPE html>
@@ -39,7 +39,7 @@ Let's run this. We could open it directly in our browser but I like using [serve
3939

4040
> Let's add some style! [Click here][style] to get the stylesheet for this course. Make a file called style.css in src/ and paste the previous file there. If you follow along with the course and use the same class names, the styles will be applied for you automatically. This isn't a course on CSS so I make no assertion it's any good!
4141
42-
Make a new file called src/App.js and put this in there.
42+
Make a new directory calle src and a new file called App.js in that directory and put this in there.
4343

4444
```javascript
4545
const App = () => {

‎lessons/03-tools/A-npm.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: "npm"
3+
---
4+
5+
npm does not stand for Node.js Package Manager. It is, however, the package manager for Node.js. (They don't say what it stands for.) It also has all the packages in the front end scene. npm makes a command line tool, called `npm` as well. `npm` allows you to bring in code from the npm registry which is a bunch of open source modules that people have written so you can use them in your project. Whenever you run `npm install react` (don't do this yet), it will install the latest version of React from the registry.
6+
7+
In order to start an npm project, run `npm init -y` at the root of your project. If you don't have Node.js installed, please go install that too. When you run `npm init` it'll ask you a bunch of questions. If you don't know the answer or don't care, just hit enter. You can always modify package.json later. This will allow us to get started installing and saving packages.
8+
9+
## pnpm
10+
11+
Another option here is to use [pnpm][pnpm]. pnpm is a newer package manager that makes different tradeoffs than npm, notably how it chooses to organize the node_modules directory. npm maintains a flat file structure and installs everything flat whereas pnpm does more symlinking. Both are fine, feel free to choose what works for you. I'll be using npm because it's easier for students to use.
12+
13+
[pnpm]: https://pnpm.io/motivation

‎lessons/03-tools/B-code-formatting.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
It's important to keep quality high when writing code. Or at least that's how I sell ESLint and Prettier to my co-workers. In reality I'm super lazy and want the machine to do as much work as possible so I can focus more on architecture and problem-solving and less on syntax and style. While there are many tools that can help you keep code quality high, these two I consider core to my workflow.
2+
3+
[Prettier][prettier] is an amazing tool from the brain of [James Long][jlongster]. James, like many of us, was sick of having to constantly worry about the style of his code: where to stick indents, how many, when to break lines, etc etc. Coming from languages like Go, Reason, or Elm where all that is just taken care of by the tooling for the language, this quickly wears. James did something about it and made a tool to take care of it: Prettier.
4+
5+
Prettier is a really fancy pretty printer. It takes the code you write, breaks it down in to an abstract syntax tree (AST) which is just a representation of your code. It then takes that AST, throws away all of your code style you made and prints it back out using a predefined style. While this sounds a little scary, it's actually really cool. Since you no longer have control of the style of your code, you no longer have to think about it at all. Your code is always consistent, as is the code from the rest of your team. No more bikeshedding!! As I like to put it: if your brain is a processor, you get to free up the thread of your brain that worries about code styles and readability: it just happens for you. Don't like semicolons? Don't write them! It puts them in for you. I _love_ Prettier.
6+
7+
Need to tool around a bit with it before you trust it? [Go here][prettier-playground]. You can see how it works.
8+
9+
Let's go integrate this into our project. It's _pretty_ easy (since I'm a dad now, I'm legally obligated to make this joke.)
10+
11+
Either install Prettier globally `npm install --global prettier` or replace when I run `prettier` with (from the root of your project) `npx prettier`. From there, run `prettier src/App.js`. This will output the formatted version of your file. If you want to actually write the file, run `prettier --write src/App.js`. Go check src/App.js and see it has been reformatted a bit. I will say for non-JSX React, prettier makes your code less readable. Luckily Prettier supports JSX! We'll get to that shortly.
12+
13+
Prettier has a few configurations but it's mostly meant to be a tool everyone uses and doesn't argue/bikeshed about the various code style rules. [Here they are][prettier-options]. I just use it as is since I'm lazy. Prettier can also understand [flow][flow] and [TypeScript][ts].
14+
15+
Prettier is great to use with [Visual Studio Code][vscode]. Just download [this extension][vscode-prettier]. Pro tip: set it to only run Prettier when it detects a Prettier config file. Makes it so you never have to turn it off. In order to do that, set `prettier.requireConfig` to `true` and `editor.formatOnSave` to true.
16+
17+
So that our tool can know this is a Prettier project, we're going to create a file called `.prettierrc` and put `{}` in it. This lets everyone know this is a Prettier project that uses the default configuration. You can put other configs here if you hold strong formatting opinions.
18+
19+
## npm scripts
20+
21+
So it can be painful to try to remember the various CLI commands to run on your project. You can put CLI commands into it and then run the name of the tag and it'll run that script. Let's go see how that works. Put the following into your package.json.
22+
23+
First run `npm install -D [email protected]` `-D` means it's for development only.
24+
25+
```json
26+
"scripts": {
27+
"format": "prettier --write \"src/**/*.{js,jsx}\""
28+
},
29+
```
30+
31+
Now you can run `npm run format` and it will run that command. This means we don't have to remember that mess of a command and just have to remember format. Nice, right? We'll be leaning on this a lot during this course.
32+
33+
> Note the `@3.3.3` portion. For the purposes of making this course not break in the future, I have you install the _exact_ version of packages I used when I made this course. As is natural, packages change and progress over time and I can't anticipate how that will happen. So I'd suggest you use the same packages I do as you do this course (even if npm yells at you for security vulnerabilites). As soon as you're done with the course, feel free to go update the versions to the latest and see if anything breaks.
34+
35+
[jlongster]: https://twitter.com/jlongster
36+
[prettier]: https://github.com/prettier/prettier
37+
[prettier-playground]: https://prettier.io/playground/
38+
[prettier-options]: https://prettier.io/docs/en/options.html
39+
[flow]: https://flow.org/
40+
[prettier-ide]: https://prettier.io/docs/en/editors
41+
[ts]: https://www.typescriptlang.org/
42+
[vscode]: https://code.visualstudio.com/?WT.mc_id=reactintro-github-brholt
43+
[vscode-prettier]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&WT.mc_id=reactintro-github-brholt

‎lessons/03-tools/C-linting.md

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: "ESLint"
3+
---
4+
5+
On top of Prettier which takes of all the formatting, you may want to enforce some code styles which pertain more to usage: for example you may want to force people to never use `with` which is valid JS but ill advised to use. [ESLint][eslint] comes into play here. It will lint for this problems.
6+
7+
First of all, run `npm install -D [email protected] [email protected] [email protected]` to install eslint in your project development dependencies. Then you may configure its functionalities.
8+
9+
There are dozens of preset configs for ESLint and you're welcome to use any one of them. The [Airbnb config][airbnb] is very popular, as is the standard config (both of which I taught in previous versions of this class). I'm going to use a looser one for this class: the recommended JS config from ESLint. Let's create an `eslint.config.mjs` file to start linting our project.
10+
11+
> We're using .mjs (module JS) because we want to use import/export for modules instead of require/
12+
13+
Create this file called `eslint.config.mjs`.
14+
15+
```js
16+
import js from "@eslint/js";
17+
import globals from "globals";
18+
import prettier from "eslint-config-prettier";
19+
20+
/** @type {import('eslint').Linter.Config[]} */
21+
export default [
22+
js.configs.recommended,
23+
{
24+
files: ["**/*.js"],
25+
languageOptions: {
26+
globals: { ...globals.browser, ...globals.node },
27+
parserOptions: {
28+
ecmaFeatures: {
29+
jsx: true,
30+
},
31+
},
32+
},
33+
},
34+
prettier,
35+
];
36+
```
37+
38+
- ESLint changed a lot with version 9. In previous versions of this course we did used the JSON version of configuration and that's no longer supported; you _have_ to do their newer "flat" version of config (honestly it is better.)
39+
- The `/** @type {import('eslint').Linter.Config[]} */` is a VS Code / TypeScript trick to be able to do autocompletions on the config object. Super helpful to have the types available right in VS Code. It's not required.
40+
- [globals][globals] is a package that is just a big JSON file of what's available in each environment. We're going to be in Node.js and Browser environments so we grabbed those two. If I was being a bit more discerning I'd carefully only apply browser configs to browser files and node configs to Node.js files.
41+
- The config objects are applied in order. We did ESLint's JS config first, and then our custom one so we can overwrite it where we want to, and then the Prettier one should always come last as all it does is turn off rules that Prettier itself does; it doesn't add anything.
42+
43+
This is a combination of the recommended configs of ESLint and Prettier. This will lint for both normal JS stuff as well as JSX stuff. Run `npx eslint` now and you should see we have a few errors. Run it again with the `--fix` flag and see it will fix some of it for us! Go fix the rest of your errors and come back. Let's go add this to our npm scripts.
44+
45+
```json
46+
"lint": "eslint",
47+
```
48+
49+
> 🚨 ESLint will have a bunch of errors right now. Ignore them; we'll fix them in a sec.
50+
51+
Worth adding three things here:
52+
53+
- With npm scripts, you can pass additional parameters to the command if you want. Just add a `--` and then put whatever else you want to tack on after that. For example, if I wanted to get the debug output from ESLint, I could run `npm run lint -- --debug` which would translate to `eslint --debug`.
54+
- We can use our fix trick this way: `npm run lint -- --fix`.
55+
- We're going to both JS and JSX.
56+
57+
ESLint is a cinch to get working with [Visual Studio Code][vscode]. Just download [the extension][vscode-eslint].
58+
59+
## oxlint and Biome
60+
61+
Two projects to watch going forward here: [Biome][biome] (formerly called Rome) and [oxlint][oxlint]. Both are written in Rust and designed to be faster than ESLint (which is written in JavaScript). ESLint at huge scale can be a bit slow and these two projects aim to fix that bottleneck. I'd still say it's early days on these projects and 99% of the time ESLint is fast enough. Still, good to keep an eye on both of the projects. Eventually both projects aim to replace Prettier as well.
62+
63+
[eslint]: https://eslint.org
64+
[vscode-eslint]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
65+
[airbnb]: https://github.com/airbnb/javascript
66+
[vscode]: https://code.visualstudio.com/
67+
[biome]: https://biomejs.dev/
68+
[oxlint]: https://oxc.rs/docs/guide/usage/linter.html

‎lessons/03-tools/D-git.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
description: "Git is a critical part of any JS project and Brian makes sure you have it set up."
3+
---
4+
5+
Git is a critical part of any project and probably something many of you are already familiar with. If you haven't, be sure to initialize your project as a git repo with `git init` in the root of your project (VSCode and any other number of tools can do this as well.)
6+
7+
If you haven't already, create a .gitignore at the root of your project to ignore the stuff we don't want to commit. Go ahead and put this in there:
8+
9+
```
10+
node_modules
11+
dist/
12+
.env
13+
.DS_Store
14+
coverage/
15+
.vscode/
16+
```
17+
18+
This will make it so these things won't get added to our repo. If you want more Git instruction, please check out [Nina Zakharenko's course on Frontend Masters][nina]
19+
20+
[nina]: https://frontendmasters.com/courses/git-in-depth/

0 commit comments

Comments
 (0)