Front-end code specifications
vue3 version: [Vue&React] version
3.2.47
TS version: [TS&JS] version
5.0.4
vite version: [Webpack&Vite] version
4.3.9
Eslint version:
8.43.0
Naming rules: [See the name and understand the meaning]
Project naming:
All in lowercase, separated by dashes
For example: my_project_name
Directory naming:
Refer to the project naming rules;
All in lowercase, separated by dashes
When there is a plural structure, plural nomenclature should be used.
Example: images,
JS/VUE files
Refer to the project naming rules: all in lowercase, separated by dashes
例：chat_model.js【chat.vue】
CSS/SCSS file naming:
See the name and understand the meaning, refer to the project naming rules: all in lowercase, separated by dashes
Example: chat.css
HTML file naming:
Refer to the project naming rules: all in lowercase, separated by dashes
Example: chat.html
HTML:
grammar
Use soft tab (4 spaces) for indentation;
nested nodes should be indented;
on attributes, use double quotes, do not use single quotes;
attribute names are all lowercase, use dashes as separators;
do not automatically close tags Use trailing slashes (the HTML5 specification states they are optional);
do not omit optional closing tags, for example: and .
HTML5 doctype
Use this simple doctype at the beginning of the page to enable standards mode so that it displays as consistently as possible in every browser;
Although doctype is not case-sensitive, by convention, doctype is capitalized (regarding html attributes, uppercase or lowercase).
lang attribute
According to the HTML5 specification:
The lang attribute should be added to the html tag. This will help speech tools and translation tools, telling them how to pronounce and translate.
More explanation about the lang attribute here;
The language list can be found on sitepoint;
But sitepoint only gives broad categories of languages. For example, Chinese only gives zh, but it does not distinguish between Hong Kong, Taiwan, and mainland China. Microsoft has given a more detailed language list, which breaks down zh-cn, zh-hk, zh-tw.
Character Encoding
By declaring an explicit character encoding, the browser can easily and quickly determine the rendering method suitable for web content, usually specified as 'UTF-8'.
IE compatibility mode
Use tags to specify which version of IE the page should be rendered with;
Introduce CSS, JS
According to the HTML5 specification, there is usually no need to specify type when introducing CSS and JS, because text/css and text/javascript are their default values respectively.
Use import to introduce
Attribute order
Properties should appear in a specific order to ensure readability;
class
id
name
data-*
src, for, type, href, value, max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
class is designed for highly reusable components , so it should be in the first place;
The id is more specific and should be used sparingly, so put it second.
JS generates tags
Generating tags in JS files makes content harder to find, harder to edit, and worse for performance. This situation should be avoided as much as possible.
Reduce the number of tags
When writing HTML code, you need to try to avoid redundant parent nodes;
Many times, it is necessary to iterate and refactor to make the HTML smaller.
CSS/SCSS:
indentation
Use soft tab (4 spaces)
semicolon
Add a semicolon at the end of each property declaration
Spaces
Spaces are not required in the following situations:
After the attribute name
The delimiter character ',' before !important after '!' in multiple rules.
In the attribute value, before '(' after and ')'.
There should be no extra spaces at the end of the line
. Spaces are required in the following situations:
before attribute value
Selector '>', '+', '~' before and after
'{' before
!important '!' before
@else before and after
',' in the attribute value
comment '/ ' after and ' /' before
blank line
Blank lines are required in the following situations:
It is best to keep a blank line
'}' at the end of the file followed by a blank line, including nested rules in scss.
Appropriate blank lines are required between attributes. For details, see the order of attribute declarations.
newline
Line breaks are not required in the following situations:
'{'forward
The following situations require line breaks:
After '{' and before '}',
each attribute has its own
line. Multiple rule separators after ','
Comment
Use '/* */' for comments (do not use '//' in scss). Please refer to the writing method on the right for details;
The indentation is consistent with the next line of code;
Can be placed at the end of a line of code, separated by a space.
quotation marks
Use double quotes in the outermost layer;
The content of the url should be in quotation marks;
Attribute values in attribute selectors require quotes.
name
Class names use lowercase letters, separated by dashes. IDs are named in camel case.
Variables, functions, mixes, and placeholders in scss are named in camel case.
Property declaration order
Relevant attribute declarations are grouped in the order on the right, and there needs to be a blank line between groups.
color
Color hexadecimal uses lowercase letters;
Use hexadecimal abbreviations for colors as much as possible.
Property abbreviation
Property abbreviations require you to be very clear about the correct order of property values, and in most cases you do not need to set all the values contained in the property abbreviations, so it is recommended to declare them separately as much as possible to make it clearer;
margin is the opposite of padding and needs to be abbreviated;
Common attribute abbreviations include:
font
background
transition
animation
Media inquiries
Try to keep media query rules close to the rules they are related to. Don't put them together in a separate style file or throw them at the bottom of the document. Doing so will only make it easier for everyone to forget about them later.
SCSS related
Do not include @debug in the submitted code;
Declaration order:
@extend
@include that does not contain @content
contains @include's
own attributes
nested rules
The files introduced by @import do not need the '_' at the beginning and '.scss' at the end;
Nesting cannot exceed 5 levels at most;
Use placeholder selector in @extend;
Remove unnecessary parent reference symbol '&'.
Miscellaneous
Rules that do not allow empty spaces;
Element selectors use lowercase letters;
Remove the 0 before the decimal point;
Remove unnecessary decimal points and trailing 0s from numbers;
Do not add a unit after the attribute value '0';
The writing method of the same attribute with different prefixes needs to be aligned in the vertical direction. Please refer to the writing method on the right for details;
Unprefixed standard attributes should be written after the prefixed attributes;
Do not have repeated attributes in the same rule. It does not matter if the repeated attributes are consecutive;
Do not have two identical rules in one file;
Use border: 0; instead of border: none;;
The selector should not exceed 4 levels (in scss, if it exceeds 4 levels, you should consider writing it in a nested way);
Do not include @import in posted code;
Use the '*' selector as little as possible.
JS:
indentation
Use soft tab (4 spaces).
Single line length
Do not exceed 80, but if the editor turns on word wrap, the length of a single line can be ignored.
semicolon
A semicolon is required after the following situations:
variable declaration
expression
return
throw
break
continue
do-while
space
Spaces are not required in the following situations:
After the property name of the object,
after the prefix unary operator, before
the suffix unary operator, before
the function call brackets
, no matter it is a function declaration or a function expression, there is no space before '('.
'[' after the array and '{' before ']
' before the object. After and before '}'
Operator '(' after and before ')'
Spaces are required in the following situations:
Before and after binary operators Before
and after ternary operator '?:' Before
code block '{' Before
the following keywords: else, while, catch, finally
After the following keywords: if, else, for, while, do, switch, case , try, catch, finally, with, return, typeof
after the single-line comment '//' (if the single-line comment is the same as the code, it is also required before '//'), after the multi-line comment '*' before the
attribute value of the object
, for For loops, leave a space after the semicolon. If there are multiple preconditions, leave a space after the comma.
Whether it is a function declaration or a function expression, there must be a space before '{'
between the parameters of the function.
blank line
Blank lines are required in the following situations:
After the variable declaration (when the variable is declared on the last line of the code block, no blank line is required)
Before the comment (when the comment is on the first line of the code block, no blank line is required)
After the code block (in function calls, arrays, objects There is no need for a blank line in the file)
Leave a blank line at the end of the file
newline
Where line breaks occur, there must be ',' or an operator at the end of the line;
Line breaks are not required in the following situations:
After the following keywords: else, catch, finally
code block '{' before
The following situations require line breaks:
After code block '{' and before '}', after
variable assignment
Single line comments
After the double slash, there must be a space;
The indentation is consistent with the next line of code;
Can be placed at the end of a line of code, separated by a space.
Multi-line comments
At least three lines, '*' followed by a space, please refer to the writing method on the right;
Recommended for use in the following situations:
Code segments that are difficult to understand
Code segments that may contain errors
Browser-specific HACK codes Codes
that are strongly related to business logic
Documentation comments
For various tags @param, @method, etc., please refer to usejsdoc and JSDoc Guide;
Recommended for use in the following situations:
All constants
All functions
All classes
quotation marks
Use single quotes in the outermost layer.
Variable naming
Standard variables are named in camel case (except for the attributes of the object, mainly considering the data returned by cgi).
'ID' is capitalized in the variable name.
'URL' is capitalized in the variable name.
'Android' is capitalized first in the variable name. The first letter
'iOS' in the variable name is lowercase, and the last two letters are uppercase.
Constants are all uppercase, connected with underscores.
Constructors, the first letter in
uppercase jquery objects must be named starting with '$'
variable declaration
All variable declarations in a function scope should be mentioned in the function header as much as possible, and should be declared with one var. Two consecutive var declarations are not allowed.
function
Whether it is a function declaration or a function expression, there is no space before '(', but there must be a space before '{';
No spaces are required before function call parentheses;
Immediately executed functions must be surrounded by a layer of parentheses;
Do not name the inline function;
Parameters are separated by ', '. Note that there is a space after the comma.
array, object
Object attribute names do not need to be quoted;
Objects are written indented, not on one line;
There should be no comma at the end of arrays or objects.
brackets
The following keywords must be followed by braces (even if the code block contains only one line): if, else, for, while, do, switch, try, catch, finally, with.
Miscellaneous
Don’t mix tabs and spaces;
Don’t use multiple tabs or spaces in one place;
Use 'LF' for newline characters;
The reference to the context this can only be named using one of '_this', 'that', 'self';
There should be no whitespace characters at the end of the line;
The falling through and no default situations of switch must be specially explained in comments;
Empty code blocks are not allowed.
Development environment dependencies:
"dependencies": {
"@ant-design/icons-vue": "^6.1.0",
"@element-plus/icons-vue": "^2.1.0",
"@vueuse/components": "^10.2.0",
"@vueuse/core": "^10.2.0",
"ant-design-vue": "^3.2.19",
"axios": "^1.4.0",
"dayjs": "^1.11.8",
"echarts": "^5.4.2",
"element-plus": "^2.3.6",
"mitt": "^3.0.0",
"naive-ui": "^2.34.3",
"pinia": "2.0.35",
"pinia-plugin-persistedstate": "^3.1.0",
"qs": "^6.11.1",
"tdesign-vue-next": "^1.3.7",
"vue": "^3.2.47",
"vue-router": "^4.2.2"
},
"devDependencies": {
"@commitlint/cli": "^17.6.6",
"@commitlint/config-conventional": "^17.6.6",
"@types/node": "^18.15.11",
"@types/nprogress": "^0.2.0",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.59.10",
"@typescript-eslint/parser": "^5.59.10",
"@vitejs/plugin-vue": "^4.2.0",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"autoprefixer": "^10.4.14",
"cz-git": "^1.7.0",
"eslint": "^8.43.0",
"eslint-config-prettier": "^8.8.0",
"eslint-define-config": "^1.20.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-vue": "^9.14.1",
"husky": "^8.0.3",
"import": "^0.0.6",
"less": "^4.1.3",
"less-loader": "^11.1.3",
"lint-staged": "^13.2.2",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"plop": "^3.1.2",
"postcss": "^8.4.24",
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"postcss-px-to-viewport": "^1.1.1",
"postcss-scss": "^4.0.6",
"prettier": "^2.8.8",
"rollup-plugin-visualizer": "^5.9.2",
"stylelint": "^15.8.0",
"stylelint-config-recommended": "^12.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^33.0.0",
"stylelint-config-standard-scss": "^10.0.0",
"stylelint-order": "^6.0.3",
"stylelint-prettier": "^3.0.0",
"typescript": "5.0.4",
"unocss": "^0.53.1",
"unplugin-auto-import": "^0.16.4",
"unplugin-icons": "^0.16.3",
"unplugin-vue-components": "^0.25.1",
"vite": "^4.3.9",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-imagemin": "^0.6.1",
"vite-plugin-mkcert": "^1.15.0",
"vite-plugin-mock": "^3.0.0",
"vite-plugin-pages": "^0.31.0",
"vite-plugin-progress": "^0.0.7",
"vite-plugin-restart": "^0.3.1",
"vite-plugin-style-import": "^2.0.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-images": "^0.6.1",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue-eslint-parser": "^9.3.1",
"vue-tsc": "^1.7.0"
}