Programming style guide (Frontend)

Programming Style Guide

To maintain a consistent coding style throughout the project, ESLint and Prettier will be used.

ESLint will be the linter selected for the project, while Prettier will be used as a complementary tool for automatic code formatting.

---

1. ESLint

ESLint is a static analysis tool that allows JavaScript and TypeScript code to be reviewed without having to execute it.

In the project, it will be used to:

• Detect errors before running the application.
• Detect bad practices.
• Apply quality rules.
• Maintain common standards among team members.

For example, ESLint can detect a variable that has been declared but never used.

const title = 'Hello Vue';
const num1 = 8;

If num1 is never used, ESLint should report it so that the developer can correct the issue.

---

2. ESLint Configuration

The common ESLint configuration must be maintained in:

eslint.config.ts

The rules must be configured centrally in this file so that all team members use the same analysis criteria.

---

3. Where Will ESLint Be Run?

ESLint must be run from a terminal located in the root folder of the Vue project, that is, inside the Frontend/ folder.

This is the folder where the package.json file containing the scripts used by the project is located.

Therefore, before running ESLint, it must be verified that the terminal is located inside:

cd Frontend

Once inside this folder, the following command will be executed:

npm run lint:eslint

For example:

...\Frontend> npm run lint:eslint

The command will analyze the project code and report any issues found.

Errors reported by ESLint must be reviewed and corrected before integrating changes into the repository.

---

4. Prettier

Prettier will complement ESLint by being exclusively responsible for code formatting.

Prettier does not:

• Fix logical errors.
• Compile the project.
• Optimize performance.

Its responsibility is to rewrite the code while maintaining a consistent style.

Prettier supports the file types used in the project, including:

• JavaScript.
• TypeScript.
• HTML.
• CSS.
• JSON.
• Markdown.
• Vue components (.vue).

---

5. Prettier Configuration

Following the configuration used in class, the .prettierrc.json file will use:

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,
  "singleQuote": true,
  "printWidth": 140
}

This establishes, among other things:

• The use of semicolons.
• The use of single quotes.
• A maximum line width configured at 140.

Formatting should not depend on the personal preferences of each team member, but rather on this common configuration.

---

6. Where Will Prettier Be Run?

Like ESLint, Prettier must be run from a terminal located in the root folder of the Vue project (Frontend/), where the package.json file is located.

From this location, the following command will be executed:

npm run format

For example:

...\Frontend> npm run format

This command will apply the configured formatting to the corresponding project files.

---

7. When Should They Be Run?

During development, each team member may run these tools whenever they need to verify or format their code.

However, before performing a push to the repository, both commands must be executed.

First, the following command will be executed:

npm run format

and then:

npm run lint:eslint

The expected workflow will be:

Modify code
      ↓
Save changes
      ↓
Navigate to Frontend/
      ↓
npm run format
      ↓
npm run lint:eslint
      ↓
Fix errors if any exist
      ↓
Commit
      ↓
Push

In this way, the code uploaded to the repository will maintain a consistent format and comply with the quality rules defined for the project.

8. Code Formatting and Style

To maintain consistency, readability, and facilitate code review within the team, the following style guidelines must be followed:

• Use of quotation marks: Single quotes (' ') must be strictly used whenever quotation marks are required.

• Import order: All module, library, or component imports must be organized in alphabetical order at the beginning of each file. It is recommended to group external dependencies (third-party dependencies) first, followed by local project imports, sorting each group alphabetically.