What code review checks are important for frontend projects? What code review check should we automate? I will try to answer to these questions and provide my favorite list of tools: prettier, cspell, jscpd... Some points based on the video "Code Review Best Practices" by Trisha Gee https://youtu.be/a9_0UUUNt-Y

1. What linters are useful for
frontend code review?
Seva Nechaev

2. Plan
● Code review goals and checks
● List of linters that can be useful
2

3. About me
Vsevolod(Seva) Nechaev
● Full stack developer with 5 years of
experience
● Work in Ekahau company
● Do not like code review
3

4. Code review goals
Goals depend on project.
Possible goals:
1. Ensure code meets standards
2. Find bugs
3. Control technical debt
4. Share knowledge
5. Discuss code-design/UX-design decisions
4

5. Goal 1: Ensure code meets standards
Can’t be automated:
● Code readability: is hard to understand?
Can be automated:
● Style/Formatting(spaces, empty lines…)
● Variable naming
● Language best practices (const instead of let…)
5

6. Goal 2: Find bugs
Can’t be automated:
● Mistake in business logic/task description
● UX issues: not best css styles, delays in UI, extra reloading
● Figma design improvements
● Not needed API calls
Hard to find manually:
● Typos
● Too big bundle size
● Test complex business logic with hard data preparation
6

7. Goal 3: Control technical debt
Actual for backend and frontend:
● Code design (SOLID, design patterns, architecture…)
● Overengineering
Specific for frontend
● Code duplication
7

8. What can be important to check?
Actual for frontend and backend:
1. Test business logic
2. Style/Formatting(spaces, empty
lines…)
3. Naming
4. Code readability
5. Language best practices (const
instead of let, css styles tips…)
6. Code design (SOLID, design
patterns, architecture…)
7. Overengineering
Frontend-specific:
1. UX issues: not best css styles,
delays in UI
2. Figma design improvements
3. Code duplication
4. Typos
5. Too big bundle size
6. Not needed API calls
8

9. What do we check usually?
Some things are easier to comment on than others:
1. Formatting: Where are the spaces and line breaks?
2. Naming: Do the field/constant/variable/param/class names conform to
standards?
3. Frontend-specific:
a. UX issues: not best font-size, delays in UI
b. Figma design improvements
c. Typos(but it is easy to miss)
9

10. Missed checks
Actual for frontend and backend
1. Test complex business logic
2. Code design (SOLID, design patterns, architecture…)
3. Overengineering
Frontend specific:
1. Code duplication
2. Typo
3. Not needed API calls
4. Too big bundle size
10

11. Code review challenges
Technical challenges:
● Many checks for code review
● Some checks are easier to do than others
● It is hard to do some checks manually
About communication and process challenges
Code review best practices by Trisha Gee(JetBrains)
11

12. Let’s dive into automation way
Code review technical challenges:
● Many types of checks
● Some checks are easier to do than others
● It is hard to do some checks manually
Possible solutions:
● Automation
● Checklists, PR templates…
● Prioritizing checks and clarifying quality requirements
12

13. Can be fully or partially automated
1. Style/Formatting(spaces, empty lines…)
2. Code duplication
3. Typos
4. Language best practices (const instead of let, css styles tips…)
5. Too big bundle size
13

14. Style/Formatting(spaces, empty lines…)
Prettier formatter(npm package prettier)
● Can format code on pre-commit phase
● No empty lines and extra spaces
● No extra semicolon at the end of lines
It is safe to use:
● Does not change code logic, only spaces, empty lines, semicolons…
14

15. Code duplication
We can run code duplication check on pre-commit/PR event
● SonarQube(paid/free community edition)
● JS Copy/paste detector(free)
○ npm package jscpd
○ Linters based on jscpd
VS code extension
● Duplicated code(based on jscpd)
15

16. Language best practices
npm package eslint
Plugins for eslint:
● @typescript-eslint/eslint-plugin
● @angular-eslint/eslint-plugin
● eslint-plugin-react
● eslint-plugin-lodash
● eslint-plugin-css-modules
● …
16

17. Typo
Spell Checker for Code (npm package)
● Cspell
Github-action (based on cspell)
● cspell-action
VS code extension
● Code Spell Checker
17

18. Too big bundle size
Can be useful when we add new library to the project
VS code extension:
● Import Cost
18

19. Summary
● It is hard to do all possible code review checks manually
● Let’s use automation tools for some checks:
○ Style/Formatting(spaces, empty lines…)
○ Code duplication
○ Typos
○ Language best practices
○ Bundle size
19

20. Thank you for your attention!
Demo repository with linters https://github.com/seva-nechaev/linters-frontend
Feel free to connect https://www.linkedin.com/in/seva-nechaev/
20

21. Not included
● Using automated tests(unit, integration, e2e)
● Code review checks for security, accessibility
● Code review human challenges Code review best practices by Trisha
Gee(JetBrains):
● We are harder on other people’s code than our own
● Different reviewer have different feedback
● Ping pong reviews
● Implementation strategy for adding linters step by step in a safe way
21