[vscade] front end project file is automatically formatted (.Vue,.Js)

DDGarfield 2022-06-23 19:02:46 阅读数:585

vscadeendprojectfileautomatically

【 A good workman does his work well , You must sharpen your tools first 】 What do you use to develop front-end projects ,WebStorm, Atom, still Sublime , Which one of them is not famous , But on lightweight , On those who don't want money , On Ecology ,Visual Studio Code Are quite powerful ,VSCode This super editor , Is eating away at all the IDE And editor market . As long as the plug-ins are used properly ,vscode It can also achieve the effect of commercial software .

1. introduction

Development vue project , Have you encountered any of the following situations :

1.1 Incorrect comment

stay vue file ,template Notes in Ctrl+/ Code

//<slot name="left" :itemLeft="itemLeft">{{ itemLeft }}</slot>

This is a html Code , The comment should look like this :

 <!-- <slot name="left"
:itemLeft="itemLeft">{{ itemLeft }}</slot>

1.2 Eslint A bunch of mistakes

  • Strings must use single quotes ,Strings must use singlequote.eslint
  • Don't end with a semicolon ,Extra semicolon

1.3 Target of configuration

We configure what we need to achieve

  • edit vue,js
  • preservation
  • Auto format
    • JavaScript in , Double quotation marks are automatically changed to single quotation marks , Semicolons are automatically removed
    • vue, Label attribute line wrapping in template

2. Installing a plug-in

2.1 Prettier

It parses the code and reprints it with its own rules , And consider the maximum length to enforce a consistent style , And package code if necessary . Now , It has become the preferred solution to all code format problems ; Support JavaScriptFlowTypeScriptCSSSCSSLessJSXVueGraphQLJSONMarkdown Other languages . Here we need to make Prettier and Eslint combination , While detecting potential problems in your code , It can also unify the team code style , To drive the writing of high-quality code , To improve work efficiency . What we want is not only detection problems , There is also the problem of automatic repair .

2.2 ESLint

ESLint It was originally made by Nicholas C. Zakas On 2013 year 6 Open source project created in . Its goal is to provide a plug-in javascript Code detection tools . More detailed references ESlint Chinese net

2.3 Vetur

vscode The next great vue Developing a plug-in , Has the following characteristics

  • Syntax highlighting
  • Snippet
  • Emmet
  • Error detection
  • format
  • intellisense
  • ...

Refer to official documents for more details

3. To configure

  • Ctrl+Shift+P
  • Search for settings.json
  • choice Prefrerences:Open Settings(JSON)

Yes UI Operation steps , Interested children's shoes can try File-Prefrerences-Settings

Then copy and save the following configuration

{
"editor.fontSize": 17,// Editor font size
"[scss]": {
"editor.defaultFormatter": "michelemelluso.code-beautifier"
},//scss Formatting tool
"workbench.iconTheme": "vscode-icons",//vscode File icon theme
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",// Default terminal shell
"go.formatTool": "goimports",//golang Formatting tool
"editor.defaultFormatter": "esbenp.prettier-vscode", // Editor formatting tool
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},//javascript Formatting tool
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},//vue Formatting tool
"editor.insertSpaces": false,
"workbench.editor.enablePreview": false, // Open file without overwriting
"search.followSymlinks": false, // close rg.exe process
"editor.minimap.enabled": false, // Close quick Preview
"files.autoSave": "afterDelay", // Edit auto save
"editor.lineNumbers": "on", // Enable line count prompt
"editor.quickSuggestions": {
// Turn on automatic display of suggestions
"other": true,
"comments": true,
"strings": true
},
"editor.tabSize": 2, // Tab symbol eslint
"editor.formatOnSave": true, // Auto format every save
// "eslint.codeActionsOnSave": {
// "source.fixAll.eslint": true
// },
"prettier.eslintIntegration": true, // Give Way prettier Use eslint Code format of
"prettier.semi": true, // Remove the semicolon at the end of the code
"prettier.singleQuote": false, // Use single quotes instead of double quotes
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // Let function ( name ) Add a space between and the following parentheses
"vetur.format.defaultFormatter.html": "js-beautify-html", // format .vue in html
"vetur.format.defaultFormatter.js": "vscode-typescript", // Give Way vue Medium js Press the editor's own ts Format to format
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" // Property to force line break alignment
},
"prettier": {
"semi": false,
"singleQuote": true
},
"vscode-typescript": {
"semi": false,
"singleQuote": true
}
},
"eslint.validate": [
"vue",
// "javascript",
"typescript",
"typescriptreact",
"html"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}

4. Try it

  • Come and see my vue Code , First look at template part
<template>
<div>
Push the management -> Mobile push
<Table border ref="selection" :loading="loading" :columns="insideColumns" :data="insideTableData"></Table>
<Button @click="handleSelectAll(true)"> Set select all </Button>
<Button @click="handleSelectAll(false)"> Deselect all </Button>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<Page :total="totals" :page-size="pageSize" show-sizer show-total @on-change="changePage" @on-page-size-change="pagesizechange"></Page>
</div>
</div>
</div>
</template>
  • Again Ctrl+S, The change is obvious
<template>
<div>
Push the management -> Mobile push
<Table border
ref="selection"
:loading="loading"
:columns="insideColumns"
:data="insideTableData"></Table>
<Button @click="handleSelectAll(true)"> Set select all </Button>
<Button @click="handleSelectAll(false)"> Deselect all </Button>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<Page :total="totals"
:page-size="pageSize"
show-sizer
show-total
@on-change="changePage"
@on-page-size-change="pagesizechange"></Page>
</div>
</div>
</div>
</template>
  • Look again javascript Code section
import {getNotifyTableData} from '@/api/data'
export default {
data() {
return {
loading: false,
insideColumns: [
{
type: "selection",
width: 60,
align: 'center'
}
],
insideTableData: [],
pageIndex: 1,
pageSize: 10,
totals: 0
}
}
  • Again Ctrl+S
import { getNotifyTableData } from '@/api/data'
export default {
data () {
return {
loading: false,
insideColumns: [
{
type: 'selection',
width: 60,
align: 'center'
}
],
insideTableData: [],
pageIndex: 1,
pageSize: 10,
totals: 0
}
}
}

Don't look carefully here , May not know the change , Look for the data And () Space for ,selection Double quotation marks become single quotation marks , If there is a semicolon , It will be removed too .

stay stylescripttemplate Note shortcuts are used in the three parts ,css Will change /* */,js Will change //,html Will change <!-- -->

A good workman does his work well , You must sharpen your tools first , this time vscode Will be your development vue The artifact of .

Reference link

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

https://www.jianshu.com/p/d98e0b0139fb?utm_source=oschina-app

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=octref.vetur

版权声明:本文为[DDGarfield]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/174/202206231758266843.html