【Vscode】 前端项目文件自动格式化(.Vue,.js)

DDGarfield 2022-06-23 17:58:51 阅读数:576

前端项目文件vscode自动

【工欲善其事,必先利其器】大家用什么来开发前端项目呢,WebStorm, Atom, 还是Sublime ,这里面哪个不是大名鼎鼎,但是论轻量级,论不要钱的,论生态,Visual Studio Code都是相当强大的,VSCode这款超级编辑器,正在蚕食市场上所有IDE和编辑器的市场。只要插件运用得当,vscode也能达到商业软件效果。

1.引言

开发vue项目,大家有没有遇到如下情况:

1.1 注释不对

在vue文件,template中注释Ctrl+/代码

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

这是html代码,注释应该是这样:

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

1.2 Eslint一堆错误

  • 字符串必须使用单引号,Strings must use singlequote.eslint
  • 结尾不要使用分号,Extra semicolon

1.3 配置的目标

我们配置需要达到的目标

  • 编辑vue,js
  • 保存
  • 自动格式化
    • JavaScript中,双引号自动改单引号,分号自动去掉
    • vue,模板中标签属性换行

2.安装插件

2.1 Prettier

它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要时包装代码。如今,它已成为解决所有代码格式问题的优选方案;支持 JavaScriptFlowTypeScriptCSSSCSSLessJSXVueGraphQLJSONMarkdown 等语言.这里我们需要让Prettier和Eslint结合,检测代码中潜在问题的同时,还能统一团队代码风格,从而促使写出高质量代码,来提升工作效率。我们要的不仅是检测问题,还有就是自动修复问题。

2.2 ESLint

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。更详尽的参考ESlint中文网

2.3 Vetur

vscode下一款优秀的vue开发插件,具有如下特征

  • 语法高亮
  • Snippet
  • Emmet
  • 错误检测
  • 格式化
  • 智能感知
  • ...

更详尽的参考官方文档

3.配置

  • Ctrl+Shift+P
  • 搜索settings.json
  • 选择Prefrerences:Open Settings(JSON)

有UI操作步骤,有兴趣的童鞋可以试试File-Prefrerences-Settings

然后把如下配置复制保存

{
"editor.fontSize": 17,//编辑器字体大小
"[scss]": {
"editor.defaultFormatter": "michelemelluso.code-beautifier"
},//scss格式化工具
"workbench.iconTheme": "vscode-icons",//vscode文件图标主题
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",//默认终端shell
"go.formatTool": "goimports",//golang格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode", //编辑器格式化工具
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},//javascript格式化工具
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},//vue格式化工具
"editor.insertSpaces": false,
"workbench.editor.enablePreview": false, //打开文件不覆盖
"search.followSymlinks": false, //关闭rg.exe进程
"editor.minimap.enabled": false, //关闭快速预览
"files.autoSave": "afterDelay", //编辑自动保存
"editor.lineNumbers": "on", //开启行数提示
"editor.quickSuggestions": {
//开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"editor.tabSize": 2, //制表符符号eslint
"editor.formatOnSave": true, //每次保存自动格式化
// "eslint.codeActionsOnSave": {
// "source.fixAll.eslint": true
// },
"prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
"prettier.semi": true, //去掉代码结尾的分号
"prettier.singleQuote": false, //使用单引号替代双引号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
},
"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.试试吧

  • 来看看我的vue代码,先看template部分
<template>
<div>
推送管理 -> 移动推送
<Table border ref="selection" :loading="loading" :columns="insideColumns" :data="insideTableData"></Table>
<Button @click="handleSelectAll(true)">设置全选</Button>
<Button @click="handleSelectAll(false)">取消全选</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,变化很明显
<template>
<div>
推送管理 -> 移动推送
<Table border
ref="selection"
:loading="loading"
:columns="insideColumns"
:data="insideTableData"></Table>
<Button @click="handleSelectAll(true)">设置全选</Button>
<Button @click="handleSelectAll(false)">取消全选</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代码部分
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
}
}
}

这里不仔细看,可能不知道变化,注意看data与()的空格,selection双引号变单引号,如果有分号,也会被去掉。

stylescripttemplate三部分中分别使用注释快捷键,css会变/* */,js 会变//,html会变<!-- -->

工欲善其事,必先利其器,这下vscode就将成为您开发vue的神器。

参考链接

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://cloud.tencent.com/developer/article/2028959