当前位置:   article > 正文

eslint+prettier+vue3格式化

vue3格式化
  1. 项目里面安装并配置eslint。

参考官网执行如下命令

  1. npm init @eslint/config
  2. 等价于
  3. npm install eslint -D //安装eslint
  4. npx eslint --init //初始化配置eslint

执行后会有一些配置选项,按需选择。如下是按照个人当前项目需要进行的选择,可以作为参考。执行完后项目里面会多出一个.eslintrc.js文件,用于后面eslint的配置。

  1. 配置.eslintrc.js和.prettierrc文件

eslint提供两类规则:检查格式化的规则、检查代码质量的规则。说到底eslint是通过一条条规则限制代码规范,且规则的重点不在代码风格上,因此单凭eslint不能完全统一代码风格。

而prettier只负责代码格式化,不负责管理代码质量,采用prettier来统一代码风格优选。prettier支持配置的参数不多,且所有参数都有默认值,若需更改默认配置,新建.prettierrc.js文件配置具体值,参考prettier config。如下参数说明:

  1. module.exports = {
  2. printWidth: 80,    //(默认值)单行代码超出 80 个字符自动换行
  3. tabWidth: 2, //(默认值)一个 tab 键缩进相当于 2 个空格
  4. useTabs: true, // 行缩进使用 tab 键代替空格
  5. semi: false, //(默认值)语句的末尾加上分号
  6. singleQuote: true, // 使用单引号
  7. quoteProps: 'as-needed', //(默认值)仅仅当必须的时候才会加上双引号
  8. jsxSingleQuote: true, // 在 JSX 中使用单引号
  9. trailingComma: 'all', // 不用在多行的逗号分隔的句法结构的最后一行的末尾加上逗号
  10. bracketSpacing: true, //(默认值)在括号和对象的文字之间加上一个空格
  11. jsxBracketSameLine: true, // 把 > 符号放在多行的 JSX 元素的最后一行
  12. arrowParens: 'avoid', // 当箭头函数中只有一个参数的时候可以忽略括弧
  13. htmlWhitespaceSensitivity: 'ignore', // vue template 中的结束标签结尾尖括号掉到了下一行
  14. vueIndentScriptAndStyle: false, //(默认值)对于 .vue 文件,不缩进 <script> 和 <style> 里的内容
  15. embeddedLanguageFormatting: 'auto', //(默认值)允许自动格式化内嵌的代码块
  16. };

问题1:eslint和prettier都可以管控代码风格,此时可能会出现冲突。目前已经有了非常成熟的解决方案,即 eslint-config-prettier + eslint-plugin-prettier

  • eslint-config-prettier:关闭eslint中与prettier相互冲突的规则。

  • eslint-plugin-prettier:eslint使用prettier规则来美化代码风格。

在 .eslintrc.js中extends的最后添加一个配置,此时prettier和eslint便可以无冲突协作,保存时候也能自动修复并格式化代码了。

  1. extends: [
  2. 'plugin:vue/vue3-recommended',
  3. 'airbnb-base',
  4. 'plugin:@typescript-eslint/recommended',
  5. 'plugin:prettier/recommended', // 增加的配置
  6. ],

问题2:eslint解析.vue 文件中的template无效。eslint-plugin-vue是对.vue 文件进行代码校验的插件,插件一些扩展如下。个人项目里面用的vue3,选用的plugin:vue/vue3-recommended。

  1. plugin:vue/base:基础
  2. plugin:vue/essential:预防错误的(用于 Vue 2.x)
  3. plugin:vue/recommended:推荐的,最小化任意选择和认知开销(用于 Vue 2.x);
  4. plugin:vue/strongly-recommended:强烈推荐,提高可读性(用于 Vue 2.x);
  5. plugin:vue/vue3-essential:(用于 Vue 3.x)
  6. plugin:vue/vue3-strongly-recommended:(用于 Vue 3.x)
  7. plugin:vue/vue3-recommended:(用于 Vue 3.x)

配置eslint-plugin-vue插件和extends后,template校验还是会失效,此时需要再配置和eslint-plugin-vue插件对应的解析器vue-eslint-parser。vue-eslint-parser能解析 template的内容,但不会解析JS,因此需要再配置一个解析器@typescript-eslint/parser

  • vue-eslint-parser:配置在外面,eslint能解析<template>标签中的内容

  • @typescript-eslint/parser:配置在parserOptions中用来解析vue文件中<script>标签中的代码。

具体配置如下:

  1. parser: 'vue-eslint-parser', // 解析<template>标签中的内容
  2. parserOptions: {
  3. ecmaVersion: 12,
  4. parser: '@typescript-eslint/parser', // 解析vue文件中<script>标签内容
  5. sourceType: 'module',
  6. },

问题3: 可以采用如下命令检测.eslintrc.js文件中是否有未安装的插件,确保插件全部安装后eslint才可起作用。

npx eslint 文件名
  1. 配置.editorconfig文件

.editorConfig专注于统一编辑器编码风格配置,对多种类型的单文件进行简单的格式化。它提供的配置参数很少,具体如下所示。

  1. # 已经是顶层配置文件,不必继续向上搜索
  2. root = true
  3. [*]
  4. # 编码字符集
  5. charset = utf-8
  6. # 缩进风格是空格
  7. indent_style = space
  8. # 一个缩进占用两个空格,因没有设置tab_with,一个Tab占用2列
  9. indent_size = 2
  10. # 换行符 lf
  11. end_of_line = lf
  12. # 文件以一个空白行结尾
  13. insert_final_newline = true
  14. # 去除行首的任意空白字符
  15. trim_trailing_whitespace = true
  16. [*.md]
  17. insert_final_newline = false
  18. trim_trailing_whitespace = false

可以看到 .editorConfig 和 .prettierrc会存在一些重复的配置,比如都提供缩进的配置参数。建议在实际应用中将二者参数设置为一致。一些注意事项如下:

  • 不同编辑器的配置存在差异,vscode 这类编辑器,需要自行安装 editorconfig 插件

  • 编辑器的行为会与 .editorconfig 文件中定义的一致,其优先级比编辑器自身的设置要高。比如编辑器vscode中,当.editorConfig中indent_size和settings.json中editor.tabSize同时配置Tab空格数, indent_size优先生效。

  • .editorconfig配置缩进时,优先级没有.eslintrc.js文件中的高,但两者并不冲突,配合使用可以使代码风格更加优雅。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/772062
推荐阅读
相关标签
  

闽ICP备14008679号