基于 VSCode 结合 Vetur+ESlint+Prettier 统一 Vue 代码风格-初馨分享

基于 VSCode 结合 Vetur+ESlint+Prettier 统一 Vue 代码风格

插件安装

安装 Vetur，ESlint， Prettier - Code formatter 插件

安装方法（安装 ESlint 插件为例）：File -> Preferences -> Extensions，打开如下界面，搜索目标插件，点击安装按钮安装

settings 配置

配置文件所在路径

User 配置：%HOMEPATH%\AppData\Roaming\Code\User\settings.json

Workerspace 配置：PROJECT_HOME\.vscode\settings.json

说明：User 配置为全局配置, 适用于所有的打开的实例，而 Workspace 配置储存在工作区之下并仅适用于本工作区的配置，显然，Workspace 配置优先于 User 配置被使用

settings.json 配置

File -> Preferences -> Settings，选择 User 、 Workspace 配置 tab 标签后，点击图示按钮，即可打开 settings.json 配置文件

然后，把以下配置黏贴到文件，保存即可。

{
  // 界面配置路径 Text Editor
  "editor.wordWrap": "bounded", // 设置 超过 word Wrap Column 设置的字符数、达到视口最小宽度，时自动换行
  "editor.wordWrapColumn": 120, // editor.wordWrap 配置为 wordWrapColumn 或者 bounded 时起作用
  "editor.insertSpaces": true, // 设置输入 tab 键时是否自动转为插入空格 （默认 ture，即自动转空格）, 当 editor.detectIndentation 配置为 true 时，该配置项将被自动覆盖
  "editor.detectIndentation": false, // 设置是否自动检测对齐，控制打开文件时是否基于文件内容，自动检测 editor.tabSize 和 editor.insertSpaces

  // 界面配置路径 Text Editor -> Font
  "editor.fontSize": 14, // 设置字体大小， 默认 14

  //界面配置路径 Text Editor -> Files
  "files.autoSave": "afterDelay", //设置延迟一定的时间后自动保存文件
  "files.autoSaveDelay": 1000, // 设置自动保存文件前需要延迟的时间，单位毫秒 默认 1000
  "files.enableTrash": true, // 设置删除文件、目录时是否允许删除到操作系统回收站，默认为 true，即允许
  "files.encoding": "utf8", // 设置读写文件时所用编码 默认 UTF-8，可针对每种语言进行设置
  "files.autoGuessEncoding": false, // 设置打开文件时，是否自动猜测字符编码，默认 false，即不自动猜测，可针对每种语言进行设置
  // 界面配置路径 Text Editor -> Formatting
  "editor.formatOnPaste": true, // 设置黏贴内容时是否自动格式化，true 表示自动格式化，需要配置格式化器 (formatter) 才可使用
  "editor.formatOnSave": true, // 设置保存文件时是否自动格式化，true 表示自动格式化, 需要配置格式化器 (formatter) 才可使用
  "editor.formatOnSaveMode": "file", // 设置保存文件时格式化整个文件还是仅被修改处。该配置项仅在 "editor.formatOnPaste" 为 true 时生效
  "editor.formatOnType": true, // 设置输入完成后是否自动格式化当前行

  // 界面配置路径 Text Editor -> Minimap
  "editor.minimap.maxColumn": 120, // 设置 minimap 的宽度以设置可渲染的最大列数，默认 120

  // 界面配置路径 Text Editor -> Suggestions
  "editor.quickSuggestions": null, // 默认选项为 on 设置回车时是否接受默认建议选项

  // Eslint 插件配置
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 设置保存时是否自动修复代码
  },
  // 界面配置路径 Extensiosn -> ESlint
  "eslint.alwaysShowStatus": true, // 设置状态栏是否一直显示 ESlint 图标项，true 表示一直显示
  "eslint.format.enable": true, // 设置是否把 ESlint 作为一个格式化器，true 表示启用

  // Prettier 插件配置
  // 界面配置路径 Extensiosn -> Prettier
  "prettier.enable": true, // 设置是否开启 prettier 插件，默认为 true，即开启
  "prettier.semi": false, // 设置是否在每行末尾添加分号，默认为 true
  "prettier.singleQuote": true, // 设置格式化时，保持单引号，如果设置为 true，则单引号会自动变成双引号
  "prettier.tabWidth": 2, // 设置每个 tab 占用多少个空格
  "prettier.printWidth": 120, // 设置每行可容纳字符数
  "prettier.useTabs": false, // 设置是否使用 tab 键缩进行，默认为 false，即不使用
  "prettier.bracketSpacing": true, // 在对象，括号与文字之间加空格 true - Example: { foo: bar }   false - Example: {foo: bar}， 默认为 true
  "prettier.jsxBracketSameLine": true, // 设置在 jsx 中，是否把'>' 单独放一行，默认为 false，即单独放一行
  // 设置各种代码的默认格式化器//以下为默认配置
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // Vetur 插件配置
  "vetur.format.enable": true, // 设置是否禁用插件格式化功能 // 默认为 true，即开启
  "vetur.format.defaultFormatter.css": "prettier", // 设置 css 代码 (<style> 包含的代码块） 默认格式化器
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.html": "prettier", // 设置 html 代码 (<template> 包含的代码块) 默认格式化器
  "vetur.format.defaultFormatter.js": "prettier-eslint", // 设置 js 代码<script> 包含的代码块） 默认格式化器
  "vetur.format.defaultFormatter.ts": "prettier", // 设置 vetur 默认使用 prettier 格式化代码
  "vetur.format.options.tabSize": 2, // 设置 tab 键占用的空格数，该配置将被所有格式化器继承
  "vetur.format.options.useTabs": false, // 设置是否使用 tab 键缩进 默认 false，即不使用，该配置将被所有格式化器继承
  //"vetur.ignoreProjectWarning": true // 控制是否忽略关于 vscode 项目配置错误的告警，默认为 false，即不忽略
}

设置默认格式化插件

右键代码编辑区，选择 Format Document WIth 弹出提示框如下，选择 Configure Default Formatter... 进一步选择默认格式化器 (这里选 Vetur) 即可。

或者选中要格式化的代码，按 Alt+Shift+F，未设置默认格式化器的时候，会弹出配置默认格式化器的提示，然后按提示操作即可

格式化代码

按上述配置，按 Ctrl + S 手动保存文件时会自动化使用 Vetur 格式化器格式化代码。

补充说明

ESlint 插件

主要用于识别和报告 ECMAScript/JavaScript 代码中的语法模式是否存在错误

Vetur 插件

这里 Vetur 的主要用途是语法高亮，其次是代码格式化，支持以下格式化器 (formatter)：

prettier: For css/scss/less/js/ts.
prettier: For pug.
prettier-eslint : For js. 运行 prettier 和 eslint --fix.
stylus-supremacy : For stylus.
vscode-typescript: 针对 js/ts. 与 VS Code 自带的的 js/ts formatter 相同
sass-formatter: For the .sass section of the files.
prettyhtml [已被弃用] For html.

虽然 Vetur 已内置上述格式化器，但是当 Vetur 检测到本地已经安装对应的格式化器时，会优先使用本地安装的格式化器。

如下，可以为不同语言指定其默认的格式化器，Vetur 默认配置如下，如果想禁用某种语言的格式化器，可以将其格式化器设置为 null 。

{
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.pug": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter"
}

两个特殊的格式化配置项

Vetur 支持两个特殊的 tabSize 和 useTabs 格式化配置，如下

{
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false
}

为啥说是特殊呢，因为这两个配置项，可以被所有格式化器继承，但是也有例外，如下：

当存在本地配置 (比如.prettierrc) 时，Vetur 会优先使用本地配置。例如：

.prettierrc 文件存在，但是没有显示设置 tabWidth ，则 Vetur 默认使用 vetur.format.options.tabSize 作为 prettier 格式化器的 tabWidth 配置。
.prettierrc 文件存在，并且显示设置了 tabWidth ，则 Vetur 自动忽略 vetur.format.options.tabSize 配置项目，总是使用.prettierrc 中配置的值。

useTabs 的使用规则也是如此

Prettier - Code formatter 插件

类似 Vetur，：Prettier 并不具有 ESlint 检查语法能力，主要用于代码格式化，统一代码风格 (最大长度、混合标签和空格、引用样式等)，包括 JavaScript，Flow，TypeScript，CSS，SCSS，Less，JSX，GraphQL，JSON，Markdown 。

jsxBracketSameLine 配置项

该配置项主要用于控制 jsx 中，是否把'>' 单独放一行，默认为 false，即单独放一行

prettier.jsxBracketSameLine:true - 格式化效果举例:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

prettier.jsxBracketSameLine:false - 格式化效果举例:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

参考连接

https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save

https://eslint.org/docs/user-guide/getting-started

https://vuejs.github.io/vetur/guide/formatting.html#formatters

https://prettier.io/docs/en/options.html

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

基于 VSCode 结合 Vetur+ESlint+Prettier 统一 Vue 代码风格