DDGarfield 2022-06-23 19:02:46 阅读数:585
【 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 .
Development vue project , Have you encountered any of the following situations :
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>
Strings must use singlequote.eslint
Extra semicolon
We configure what we need to achieve
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 JavaScript
、 Flow
、 TypeScript
、 CSS
、 SCSS
、 Less
、 JSX
、 Vue
、 GraphQL
、 JSON
、 Markdown
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 .
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
vscode The next great vue Developing a plug-in , Has the following characteristics
Refer to official documents for more details
Ctrl+Shift+P
settings.json
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
}
}
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>
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>
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
}
}
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 style
script
template
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 .
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