Table of contents
I. Introduction
The code specification for front-end project engineering refers to defining a set of code specifications in the front-end project to ensure that the code style and format in the project are consistent and improve the readability and maintainability of the code. Code specifications usually include the following aspects:
- Indentation and line breaks: Use uniform indentation and line break rules to make the structure of the code clearer.
- Naming conventions: Use unified naming rules to make the names of variables, functions, classes, etc. in the code more readable and recognizable.
- Comment specification: Use unified comment rules to make comments in the code clearer.
- Code format: Use a unified code format to make the code look more beautiful.
- Code organization: Use a unified code organization method to make the code structure clearer.
The implementation of code norms can be automated by using code inspection tools, code formatting tools, etc., so that developers can more easily follow the norms when writing code. At the same time, the code specification can also help the collaboration among team members, making the code easier to understand and modify.
Two, ESLint
ESLint is a static code analysis tool primarily used to find and fix potential problems, bugs, inconsistencies, and deprecated patterns in your code. It helps you improve code quality, avoid common mistakes, and ensure that team members follow uniform coding conventions.
ESLint Tutorial - Nuggets
GitHub - eslint/eslint: Find and fix problems in your JavaScript code.
3. Prettier
Prettier is a code formatting tool that focuses on formatting code so that it conforms to a consistent style specification. It automatically adjusts the indentation, line breaks, quotes, etc. of the code, ensuring that the code has a consistent appearance across different editors and environments.
To put it simply, ESLint pays more attention to whether your code conforms to the specification, while Pretter provides you with the ability to format the code according to the specification.
Prettier · Opinionated Code Formatter
4. Project actual combat
4.1 Environment dependent version
"dependencies": {
"@vueuse/core": "^10.4.1",
"axios": "^1.5.0",
"element-plus": "^2.3.12",
"pinia": "^2.1.6",
"vue": "^3.3.4",
"vue-router": "^4.2.4"
},
"devDependencies": {
"@types/node": "^20.5.7",
"@typescript-eslint/eslint-plugin": "^6.5.0",
"@typescript-eslint/parser": "^6.5.0",
"@vitejs/plugin-vue": "^4.2.3",
"eslint": "^8.48.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.17.0",
"prettier": "^3.0.3",
"sass": "^1.66.1",
"typescript": "^5.0.2",
"unplugin-auto-import": "^0.16.6",
"unplugin-vue-components": "^0.25.2",
"vite": "^4.4.5",
"vue-tsc": "^1.8.5"
}
4.2 Using pnpm
pnpm is the future of front-end engineering projects -
Why is Nuggets pnpm attacking npm and yarn dimensionality reduction - Nuggets
are already in 2022, pnpm is coming soon! - Nuggets
- Early npm had node_modules nesting, and multiple packages depended on the same dependent projects
- Npm3 and yarn started to adopt flat design early, but there will be ghost dependencies, and the project structure is uncertain
- pnpm is a fast, disk space-saving dependency installation tool
- A database of inode inodes describing file/directory attributes
- A hard link creates a new file, but points to the same inode, which points to the same source data
- Soft links create different inodes, but the data block stores the file path, and it still points to the source data along the path (shortcut)
- The .pnpm file is linked to the store file under the main disk through a hard link, and the pnpm installation depends on the soft link to the .pnpm file
4.3 git submission specification
A plug-in for vscode git standardized submission
5. Resource collection
ESLint & Prettier don't worry about code formatting anymore - Nuggets
Personal configuration of vscode's formatted settings.json - Nuggets
prettier error solution: need to restart after each configuration
https://github.com/prettier/prettier-vscode/issues/2324
Prettier new line error
Delete creslint(prettier/prettier ) Wrong solution-Nuggets
solve error delete · CR · (prettier/prettier)_delete 'cr'_Miya hammer's blog-CSDN blog
6. Source address
Project source code : vue-templates