vue-project2.0/3.0 格式化代码--单引号变双引号,tabSize问题解决方案

问题

1. 格式化代码后,自动将单引号变成双引号
2. 自动在行末补上分号
3. tabSize = 2, 不生效问题

解决方案(3.x)

1. 在项目根目录下,新建 .prettierre 文件, 文件内代码如下:

{
    "tabWidth": 2,
    "semi": true,  
    "singleQuote": true, //是否使用单引号为true
    "trailingComma": "es5",
    "bracketSpacing": true,
    "arrowParens": "avoid",
    "overrides": [{
            "files": [
                "*.json",
                ".eslintrc",
                ".tslintrc",
                ".prettierrc",
                ".tern-project"
            ],
            "options": {
                "parser": "json",
                "tabWidth": 2
            }
        },
        {
            "files": "*.{css,sass,scss,less}",
            "options": {
                "parser": "scss",
                "tabWidth": 2
            }
        },
        {
            "files": "*.vue",
            "options": {
                "parser": "vue",
                "tabWidth": 2
            }
        },
        {
            "files": "*.ts",
            "options": {
                "parser": "typescript",
                "tabWidth": 2
            }
        },
        {
            "files": "*.tsx",
            "options": {
                "parser": "typescript"
            }
        }
    ]
}
复制代码

2. 在vs code setting.json中配置, 加上如下代码:

"prettier": {
        "semi": false,
        "singleQuote": true
    }
复制代码

完成上述两个步骤就可以解决我上面的所列的3个问题啦

3. 分享一下我的vs code setting.json中的配置

{
  "workbench.iconTheme": "vscode-icons",
  "editor.fontSize": 15,
  "files.autoSave": "off",
  "window.zoomLevel": 0,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "beautify.tabSize": 2,
  "vetur.format.options.tabSize": 2,
  // "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // "vetur.format.styleInitialIndent": true,
  "prettier.tabWidth": 2,
  "beautify.options": {
    "editor.tabSize": 2
  },
  "prettier": {
    "semi": false,
    "singleQuote": true
  },
  "liveServer.settings.donotShowInfoMsg": true,
}

复制代码

解决方案(version=2.x)

1. npm install prettier --save-dev
2. 项目根目录下新建 .prettier.config.js
3. 代码如下

module.exports = {
  "singleQuote": true,
  "tabWidth": 2,
  "semi": true,
  "overrides": [{
      "files": [
        "*.json",
        ".eslintrc",
        ".tslintrc",
        ".prettierrc",
        ".tern-project"
      ],
      "options": {
        "parser": "json",
        "tabWidth": 2
      }
    },
    {
      "files": "*.{css,sass,scss,less}",
      "options": {
        "parser": "scss",
        "tabWidth": 2
      }
    },
    {
      "files": "*.vue",
      "options": {
        "parser": "vue",
        "tabWidth": 2
      }
    },
    {
      "files": "*.ts",
      "options": {
        "parser": "typescript",
        "tabWidth": 2
      }
    },
    {
      "files": "*.tsx",
      "options": {
        "parser": "typescript"
      }
    }
  ],
};
复制代码

vscode中的配置

{
  "workbench.iconTheme": "vscode-icons",
  "editor.fontSize": 15,
  "files.autoSave": "off",
  "window.zoomLevel": 0,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "beautify.tabSize": 2,
  "vetur.format.options.tabSize": 2,
  // "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // "vetur.format.styleInitialIndent": true,
  "prettier.tabWidth": 2,
  "beautify.options": {
    "editor.tabSize": 2
  },
  "prettier": {
    "semi": false,
    "singleQuote": true
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "terminal.integrated.shell.windows": "C:\\windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
}
复制代码