vscode vue format
Recently re-engage at the computer, reinstall the software vscode, at the time of writing projects with vue, as usual, opened the ESLint grammar checking, but found the time (using vscode formatting shortcuts
the Shift + alt + F
) all kinds of error, single and double quotes, function space problems. Because vscode its own format plug-ins that do not match the ESLint. Later, access to some documents, to solve the problem as follows:
First, install Vetur
In vscode software store search plug Vetur now be at version 0.24.0
Second, open the configuration file
Open vscode software [file] --- [Preferences] --- [setup] in accordance with the little file icon at the top right map point will pop up a file] [settings.json.
Third, the default configuration
This is vscode original default configuration.
Fourth, change the configuration file
As shown below: The red arrow vue commented configuration, with the following code at the blue arrow.
"[vue]": {
"editor.defaultFormatter": "octref.vetur" // 使用 vetur 格式化规则
},
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 去掉分号
"singleQuote": true, // true 为使用单引号
},
},
"vetur.format.defaultFormatter.js": "vscode-typescript", // js 使用 typescript
"vetur.format.defaultFormatter.html": "js-beautify-html", // html 使用 beautify
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数名字和括号前加空格
Fifth, modify ESLint
If these steps do not succeed then only modify the rules configured in .eslintrc.js years.
'off'或者0 //关闭规则关闭
'warn'或者1 //在打开的规则作为警告（不影响退出代码）
'error'或者2 //把规则作为一个错误（退出代码触发时为1）
'quotes': [1, 'single'], //引号类型 `` "" ''
'semi': [2, 'never'], // 语句强制分号结尾
'space-before-function-paren': [0, 'always'] //函数定义时括号前面要不要有空格