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",
}
複製代碼