前端vscode 环境初始化
栏目: JavaScript · 发布时间: 5年前
内容简介:无法格式化有很多种情况,多种因素造成,可能是setting.json 也可能是eslintrc.js 造成。autoFixOnSave 看是否需求自动格式化下面这段代码可解决
无法格式化有很多种情况,多种因素造成,可能是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
<script>
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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。