Linting in React Project

As learning React developer, I know the importance of code quality and consistency. One tool that has been instrumental in maintaining this consistency is ESLint. ESLint is a popular linter for JavaScript and React applications that can help analyze code for potential errors, bugs, and style violations. In this blog post, I want to share some of my experiences and tips for correct linting practices in React applications using ESLint.

Set up ESLint: First, install ESLint in your React project using npm or yarn. Then, create a configuration file .eslintrc.js in the root directory of your project. This file will contain rules for your project.

Choose a Configuration: ESLint has several pre-configured rulesets that you can use. You can also create your custom configuration based on your project’s needs. Consider using the Airbnb ruleset, which is widely used and comprehensive.Here is set of rules that our project uses.

Use ESLint with Your IDE: Most modern text editors and integrated development environments (IDEs) integrate with ESLint, allowing you to see errors and warnings in real-time. This can help catch issues early in the development process.We use VS code.

Automate Linting: Automating the linting process can save time and reduce errors. Integrate ESLint into your build process, so that it runs automatically on every code change. This helps catch errors and style violations before they get committed to the repository. You do that by putting linting in scripts in your package.json file.

Document ESLint Rules: Document the ESLint rules in your project’s README file or documentation. This helps ensure that all developers are aware of the rules and can maintain consistency across the codebase.

In conclusion, ESLint is a powerful tool for maintaining code quality and consistency in React applications. By following these best practices, you can ensure that your React projects are error-free and maintainable.

My favorite VS Code extensions

/

In this blog post I wanted to share my favorite VS code extension for working with React and web projects. Given VS code popularity, and the fact it works so well by itself, it would be useful for any developer to learn how you can extend its functionality even further. 

Material Icon theme

I Like it because it’s really eye-catching and lets you easily find files in the project.

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

ESLint

/ESLint is a popular linting tool for JavaScript that helps you identify and fix problems in your code. The ESLint extension for VS Code integrates ESLint into your editor, allowing you to catch linting issues as you type.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Prettier – Code formatter

Prettier is a code formatter that automatically formats your code to a consistent and visually pleasing style. The Prettier extension for VS Code also supports code snippets and auto-completion for Prettier configuration options, making it easy to set up and use in your projects.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

REST client

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly. It was really useful with troubleshooting requests to database.

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

These tools help me to streamline my development process, increase productivity, and produce more quality code. By sharing this setup, I hope to encourage others to customize their own VS Code environment and find the tools that work best for them.

Intro

Creation of this blog was prompted by CS467 Capstone Project class but I am hoping it will serve as a way to summarize my thoughts as I go through this class.

This is my first blog post here so I thought I’d introduce myself. My name is Tatiana, I am one of the long haulers here, having started program 4 years ago. This is my last stretch with just 2 classes, yay!!

Prior to enrolling in this degree I was stay at home mom for 16 years and had a MD from my home country. It felt a bit bizarre to be at school after so many years doing something completely different from my initial studies. It was scary, challenging and fun at the same time. Not always easy, I had to take some time off for personal and health reasons, but I was determined to proceed.

As I am near the completion of this program, I am so glad I decided to try it. I am looking forward in learning new skills in this class, like I want to come more proficient in Python and React.