vue-cli 3.0 项目对.vue文件格式化失效问题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

产生问题

VSCode中格式化vue文件时，js代码中会被自动添加上分号

你可能会疑惑，明明已经在vscode编辑器安装了prettier插件并且在setting.json进行配置（去除语句分号和单引号、默认缩进4空格），但是在脚手架生成的vue项目中.vue文件依旧不生效，怎么办？

解决方法有2个：

解决方法1

根目录.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    // '@vue/standard'    // 必需注释 @vue/standard
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  }
}

你可能在vue-cli3.0 脚手架生成项目时无意中选择了最多依赖的eslint配置，所以其生成项目在根目录中存在.editorconfig文件其内容解释如下：

[*.{js,jsx,ts,tsx,vue}]   // 该配置文件作用于*.文件后缀
charset = utf-8      // 编码
indent_style = space     // 设置缩进风格(tab是硬缩进，space为软缩进)
indent_size = 2      // 默认缩进为2个空格
trim_trailing_whitespace = true // 设为true表示会去除换行行首的任意空白字符。
insert_final_newline = true // 设为true表示使文件以一个空白行结尾

！！上面配置文件中要生效是不能存在注释的，此处是为了讲解

由于vscode插件商店安装的prettier插件的setting.json配置与当前项目的.editorconfig文件配置产生冲突，本地项目依赖只会生效后者文件，所以删除掉后者文件才能让setting.json文件生效。

解决方法2

也许你不想删除.editorconfig文件，因为有些配置是vscode插件商店的prettier插件没有的，那么你就只需：

  • 安装当前项目依赖：yarn remove prettier

  • 项目根目录中新建：.prettierrc.json文件后添加下面内容配置即可正常格式化：

    "semi": false,   // false为去除语句分号
    "singleQuote": true,  // 单引号替代双引号
    "tabWidth": 4,   // 缩进为4个空格
    "useTabs": false, // 缩进不使用tab，使用空格

EditorConfig有助于为跨越各种编辑器和IDE的同一项目的多个开发人员维护一致的编码样式。因为不同编辑器格式化代码的风格是不一样的，如果没有配置editorconfig，执行的就是编辑器默认的代码格式化规则；

具体配置参考

以上是 vue-cli 3.0 项目对.vue文件格式化失效问题 的全部内容， 来源链接： utcz.com/z/378121.html

回到顶部