Table of contents
1. Contents of this section
- VueCli scaffolding custom creation project
- ESlint code specifications and repairs
- ESlint automatic correction plug-in
2. VueCli custom creation project
1. Install scaffolding (already installed)
npm i @vue/cli -g
2.Create project
vue create hm-exp-mobile
- Options
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features 选自定义
- Manual selection of features
- Select vue version
3.x
> 2.x
- Whether to use history mode
- Select css preprocessing
- Choose the style of eslint (eslint code specification verification tool to check whether the code conforms to the specification)
- For example: const age = 18; => Error! Added an extra semicolon! There are tools at the back. Once saved, everything will be formatted in the most standardized way.
- Select the timing for verification (press Enter directly)
- Select how to generate the configuration file (press Enter directly)
- Do you want to save the preset and use it directly next time? => Do not save, enter N
- Waiting for installation, project initialization is completed
- Startup project
npm run serve
3. ESlint code specifications and manual repairs
Code specification: A set of agreed rules for writing code. For example: Are spaces required around the assignment symbol? Should I add ";" at the end of a sentence? …
No rules, no standards
ESLint: is a code inspection tool used to check whether your code complies with specified rules (you and your team can agree on a set of rules yourself). When creating the project, we use the JavaScript Standard Style code style rules.
1.JavaScript Standard Style Specification
It is recommended to read: https://standardjs.com/rules-zhcn.html, and then when writing, if you encounter errors, you can query and solve them.
Here is a small part of the rules:
- Use single quotes for strings – except where escaping is required
- No semicolon – nothing wrong with that . Do not lie to you!
- Add a space after the keyword
if (condition) { ... } - Add a space after the function name
function name (arg) { ... } - Stick with congruent Discard
===once==it isnull || undefinedavailable when checking is neededobj == null - …
2. Code specification errors
If your code does not meet the standard requirements, eslint will jump out and remind you heartily.
Let's make some random changes in main.js: add some blank lines and spaces.
import Vue from 'vue'
import App from './App.vue'
import './styles/index.less'
import router from './router'
Vue.config.productionTip = false
new Vue ( {
render: h => h(App),
router
}).$mount('#app')
After pressing save code:
You will see the following error output in the console:
eslint is here to help you. Have a good attitude and correct it if you make a mistake.
3. Manual correction
Make manual corrections one by one according to the error prompts.
If you don't know what the syntax error in the command line means, you can find its specific meaning in the ESLint rule list based on the error code (func-call-spacing, space-in-parens,...).
Open the ESLint rules table and use Page Search (Ctrl + F) for this code to find an interpretation of this rule.
4. Automatic correction through eslint plug-in
- eslint will automatically highlight errors
- Through configuration, eslint will automatically help us fix errors
- how to install
- How to configure
// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false
- Note: The eslint configuration file must be in the root directory for this plug-in to take effect. The project must be opened in the root directory, one project at a time
- Note: After using eslint verification, beatify is disabled for all formatting tools provided by vscode.
settings.json reference
{
"window.zoomLevel": 2,
"workbench.iconTheme": "vscode-icons",
"editor.tabSize": 2,
"emmet.triggerExpansionOnTab": true,
// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false
}