Detailed explanation of Vue coding style

This article mainly introduces the method of unifying the Vue coding style in vscode. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s come and take a look

vetur Many people know it, but there is no way to format the html and js in .vue under vscode. It is a headache, and the code style cannot be unified.

So many people split it directly and then introduce it in .vue. Although the method is good, it goes against the original intention of .vue single-file component.

This article introduces in detail the use of vetur prettier eslint under vscode to unify the vue coding style.

vetur plug-in

vetur After multiple versions iteration, it is currently the best vue plug-in under vscode, and even supports ts, webpack alias and other features.

However, several functions are not directly supported and require manual configuration, and several functions require other plug-ins to be configured before they can be completed with it.

This is a bit troublesome. Novice students often die here.

1. Configure eslint

prettier overrides the default formatting shortcut keys of vscode, but does not format the eslint configuration, so you need to configure the user settings separately to enable it.

Find the Preferences-> Settings menu and add "prettier.eslintIntegration": true to the User Configuration on the right to turn on eslint support.

At this point, the js file can be formatted according to the eslint specification, but the .vue file cannot be used because he does not know what it is.

Add the following configuration in User Settings to support .vue files.

"eslint.validate": [
 "javascript",
 "javascriptreact",
 {
  "language": "vue",
  "autoFix": true
 }
]

Now eslint knows vue, but this is only eslint’s knowledge, prettier still doesn’t know what it is.

So we need to add the "eslint.autoFixOnSave": true configuration to automatically fix the js code inside when saving the file.

2. Configure prettier

Although eslint can process vue files, it conflicts with prettier's formatting because prettier doesn't know what it is.

After installing the vetur plug-in, prettier knew that .vue was originally an html format file, but he still couldn't format it well.

PS: Currently vetur does not support prettier’s eslint.

Because html includes html script style 3 parts, prettier can only use the default formatting specification to format, does not support eslint, and does not format html by default.

The "prettier.eslintIntegration": true that was just turned on is only for .js files, not .vue files.

So when you format the .vue file, the stript part may be inconsistent with your eslint style, and you need to configure it separately.

For example, in my eslint specification, the string is single quoted, and the end item of the object also has a comma.

// 强制单引号
"prettier.singleQuote": true,
// 尾随逗号
"prettier.trailingComma": "all",

If you use double quotes and do not add a trailing comma, there is no need to configure it.

Or if you think it’s harmless, you don’t need to configure this. Anyway, eslint will fix it automatically when saving.

3. Configure vetur to format html

Because vetur is to split the html script style 3 parts in .vue and then hand them over to the corresponding language processing processor to process.

For example:

html can be html, pug, jade, etc.

script can be es5, es6, ts, coffee.

style can be css, less, sass, postcss, etc.

Except for the html part, everything else adopts prettier formatting by default.

If you need html formatting, you need to configure it manually.

// 使用 js-beautify-html 插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  // 属性强制折行对齐
  "wrap_attributes": "force-aligned",
 }
}

Complete the work

At this point, the configuration is complete, the complete configuration is as follows:

{
 // 强制单引号
 "prettier.singleQuote": true,
 // 尽可能控制尾随逗号的打印
 "prettier.trailingComma": "all",
 // 开启 eslint 支持
 "prettier.eslintIntegration": true,
 // 保存时自动fix
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 // 使用插件格式化 html
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // 格式化插件的配置
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   // 属性强制折行对齐
   "wrap_attributes": "force-aligned",
  }
 }
}

Now you can format html js css in .vue .

But the formatting of the js part is not formatted according to eslint, as explained above.

The js part can only use the prettier default format, and then automatically fix it when saving to achieve the effect of prettier eslint.

If you need detailed configuration, you can visit the vetur official document https://vuejs.github.io/vetur

Summary

Mainly solves the problem of prettier The problem of not formatting js in .vue, and the conflict with the eslint automatic fix style when formatting prettier.

Of course, prettier formatting is fundamentally different from eslint’s fix, but prettier’s automatic fix is ​​perfect.

For .js, prettier turns on eslint support, which is perfect directly.

But .vue can only be configured in this way, because currently vetur does not support it, and the official website only provides this solution.

Maybe it will be supported later.

Other plug-in recommendations

1. Auto Close Tag

2. Auto Rename Tag

3. Bracket Pair Colorizer

4. Code Runner

5. Document This

6. EditorConfig

7. ESLint

8. gitignore

9. ##GitLens

10. Guides

11. Import Cost

12. npm intellisense

13. Path Autocomplete

14. Prettier

15. Settings Sync

##TODO Highlight
Vetur
vscode-icons
I won’t explain them one by one.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

related articles:

What are the steps to input the ngForOf template to the component using content projection through Angular?

What are the steps to set the request and return the interceptor through axios global request parameters?

How to deal with axios interception settings and error handling?

The above is the detailed content of Detailed explanation of Vue coding style. For more information, please follow other related articles on the PHP Chinese website!