vscode vue项目格式化

写在前面:最重要的一行配置。看了下面这个配置的同学,如果已经知道写在哪里的话,就不用往下面看了。

/禁止随时添加逗号,这个很重要
      "trailingComma": "none"

正文开始

vue项目格式化,可以安装vetur插件。
在这里插入图片描述

然后写配置文件,配置文件打开步骤。

  1. ctrl键+逗号键 ;
  2. 查找setting.json

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200924182155103.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTg1MDE3,size_16,color_FFFFFF,t_70#pic_center在这里插入图片描述

插件安装完成之后,settin.json配置文件,如下

{
  //配置vscode 的终端为 git,路径是自己的安装路径可以自己找下;
  "terminal.integrated.shell.windows": "C:\\Users\\chenzj\\AppData\\Local\\Programs\\Git\\bin\\bash.exe",
  // tab 大小为2个空格
  "editor.tabSize": 2,
  //禁止保存的时候格式化
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  //函数名称前 加一个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  //格式化插件配置,设置为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // #vue组件中html代码格式化样式
      "wrap_attributes": "force-aligned", //也可以设置为“auto”,效果会不一样
      "wrap_line_length": 200,
      "end_with_newline": false,
      "semi": true,
      "singleQuote": true
    },
    "prettier": {
      //设置分号
      "semi": true,
      //双引号变成单引号
      "singleQuote": true,
      //禁止随时添加逗号,这个很重要。找了好久
      "trailingComma": "none"
    }
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  }
}

其中最难找的一个就是,设置vscode,末尾禁止添加逗号
其实是禁止随时添加逗号,但是自己就是格式化的时候,只看到末尾的逗号添加了。导致 百度的时候,问题的关键词错了,一直搜索不到自己想要的结果。今天记录下,避免大家之后踩坑。

Logo

前往低代码交流专区

更多推荐