vscode 默认初始化_前端vscode 环境初始化

无法格式化有很多种情况，多种因素造成，可能是setting.json 也可能是eslintrc.js 造成。

vscode 初始化记录

Install ESLint VS Code extension

Install Vue 2 Snippts VS Code extension

Install eslint-plugin-html: npm install --save-dev eslint-plugin-html eslint-plugin-vue

Add "plugins": ["vue","html"] to eslintrc config file as per eslint-plugin-html instructions. Vue extension is enabled by default for the plugin.

Open VS Code user settings and add vue to eslint.validate:

"eslint.validate": [

"javascript",

"javascriptreact",

{

"language": "html",

"autoFix": true

},

{

"language": "vue",

"autoFix": true

}

],

复制代码

Restart VS Code, eslint should now be displaying lint errors within

tags

setting.json 文件，按需删减

{

"workbench.iconTheme": "vscode-icons",

"window.zoomLevel": 0,

"editor.renderWhitespace": "all",

"editor.insertSpaces": true,

"editor.tabSize": 4,

"editor.trimAutoWhitespace": false,

"explorer.confirmDragAndDrop": false,

"editor.detectIndentation": false,

"eslint.validate": [

"javascript",

"javascriptreact",

{

"language": "html",

"autoFix": true

},

{

"language": "vue",

"autoFix": true

}

],

"eslint.options": {

"plugins": ["html","vue"]

},

"workbench.editor.enablePreviewFromQuickOpen": false,

"explorer.confirmDelete": false,

"editor.wordWrap": "on",

"workbench.sideBar.location": "left",

"extensions.ignoreRecommendations": true,

"debug.inlineValues": true,

"window.menuBarVisibility": "visible",

"workbench.editor.enablePreview": false,

"breadcrumbs.enabled": true,

"workbench.statusBar.feedback.visible": false,

"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

"javascript.updateImportsOnFileMove.enabled": "always",

"files.eol": "\r\n",

"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",

"vetur.format.defaultFormatter.html": "none",

"vetur.format.defaultFormatter.js": "none",

"eslint.autoFixOnSave": true,

"eslint.alwaysShowStatus": true,

"eslint.enable": true,

"files.autoSave": "off",

}

复制代码

autoFixOnSave 看是否需求自动格式化

eslintrc.js 按需复制

// http://eslint.org/docs/user-guide/configuring

module.exports = {

root: true,

// parser: "babel-eslint",

"parserOptions": {

"parser": "babel-eslint",

"ecmaVersion": 2017,

"sourceType": "module"

},

env: {

browser: true,

},

// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style

extends: ["standard", "eslint:recommended", "plugin:vue/essential"],

// required to lint *.vue files

plugins: [

"vue"

],

// add your custom rules here

"rules": {

//"off"或 0 -关闭规则

//"warn" 或 1 - 开启规则, 使用警告 程序不会退出

//"error"或 2 - 开启规则, 使用错误 程序退出

"indent": [2, 4],

//分号

"eqeqeq": 0,

"no-useless-escape": 0,

"brace-style": 0,//大括号风格

"curly": [2, "all"], //[2, "all"],//必须使用 if(){} 中的{}

"no-new": 0,

"no-return-assign": "warn",//return 语句中不能有赋值表达式

"handle-callback-err": 0,

"padded-blocks": 0,

"no-duplicate-imports": 0,

"operator-linebreak": 0,

"no-extend-native": 0,

"no-sequences": 0,

"no-debugger": 0,

"no-eval": 0,

"comma-dangle": [2, "never"],

"arrow-spacing": [2, { "before": true, "after": true }],

"no-undef": 2,

"no-console": 0,

"space-before-function-paren": [2, "always"],

"keyword-spacing": [2, { "before": true, "after": true }],

"space-before-blocks": [2, "always"],

"spaced-comment": [2, "always", {"exceptions": ['-', '+']}],

"quotes": [2, "double"],

"semi": [2, "never"],

"no-multiple-empty-lines": [2, {"max": 1}],

"generator-star-spacing": [2, { "before": true, "after": true }],

"object-curly-newline": ["error", { "consistent": true, "minProperties": 2 }],

"object-curly-spacing": [2, "always"],

"key-spacing": [2, { "beforeColon": false, "afterColon": true }],

"linebreak-style": [2, "windows"],

"eol-last": [2, "windows"],

"object-property-newline": [2, {}],

"space-infix-ops": 2,

"vue/html-indent": [2, 4, {

"attribute": 1,

"baseIndent": 1,

"closeBracket": 0,

"alignAttributesVertically": true,

"ignores": []

}],

"no-control-regex": 0

},

globals: {

"_": true,

"arguments": true,

"ActiveXObject": true,

"AndroidLogin": true

}

}

复制代码

下面这段代码可解决 template

无法格式化情况。 有些无语的可删除，按现有公司的规范来

"vue/html-indent": [2, 4, {

"attribute": 1,

"baseIndent": 1,

"closeBracket": 0,

"alignAttributesVertically": true,

"ignores": []

}],

复制代码

常用插件

Auto Rename Tag

ESlint

filesize

Git History

Vetur

vscode-icons

Vue 2 Snippets

Quick Task