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
vscode 默认初始化_前端vscode 环境初始化相关推荐
- vscode 智能打印_【Vscode官方下载】Vscode中文版官方下载 v1.41.0 免费版-开心电玩...
软件介绍 Vscode是一款可编译性的程序编程软件,它能够智能感应代码,自动填充完成后续代码,很大程度上帮助程序员提高敲代码的编辑速度,减少输入代码进行循环调试等时间,内置了Git命令,从Vscode ...
- eslint vscode 自动格式化_配置VSCode编辑器适配VUE3开发
团队协作开发一般都有统一的编码规范,举个例子:A习惯一个tab占位2个空格,B习惯一个tab占位4个空格,如果不统一,提交到仓库的代码将变得难以阅读和维护. 幸运的是我们可以通过插件来规范化代码,只要 ...
- spring boot controller 初始化_基于 tyboot 快速初始化 springboot 单体项目
基于 tyboot 快速初始化 springboot 单体项目 tyboot源码: gitee https://gitee.com/magintursh/tyboot github https://g ...
- eslint vscode 自动格式化_使用 VSCode 的必备三大神器,这才是开发 Vue 的真香解决方案...
现在用 VSCode 开发 Vue.js 应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程师,单引号双引号乱用,一段有分号一段没有分号,有的地方有逗号有的地方没有逗号,空 ...
- xavier初始化_深入解读xavier初始化(附源码)
论文是Understanding the difficulty of training deep feedforward neural networks. 一篇感觉不错的翻译为[Deep Learni ...
- mac vscode 背景半透明_给 vscode 添加半透明毛玻璃效果
Electron 可以调用 MacOS 的毛玻璃效果,下面让我来带你给 VScode 添加毛玻璃效果. 2. 创建一个 CSS 文件(CSS 是我自己写的,你可以按需修改) html { backgr ...
- java list定义和初始化_在 Java 中初始化 List 的五种方法
Java 中经常需要使用到 List,下面简单介绍几种常见的初始化方式. 1.构造 List 后使用 List.add 初始化 这是最常规的做法,用起来不太方便. 2.使用 {{}} 双括号语法 这种 ...
- [转载] python多重继承初始化_关于python多重继承初始化问题
参考链接: Python多重继承 class A(object): def __init__(self, a): print '__init__ A', str(a) self.A = a class ...
- vscode 默认初始化_Visual Studio Code(vscode)使用介绍
[TOC] vscode 安装 软件直接在vscode官网(https://code.visualstudio.com/)下载安装. 建议将下图红框中勾选,安装完成后可通过鼠标右键打开vscode. ...
最新文章
- 逆天改命,机械飞升:渐冻症科学家拒绝等死,将自己改造成了「半机械人」...
- Cortex-M3启动深度解析
- 【windows】安装pytorch1.7.1-cpu版本的geometric过程记录
- border-image图片边框
- cocos2dx 3.10 网狐土豪金版PC+手机端棋牌平台搭建
- python中score_在Python中“得分必须返回一个数字”scikit-learn中的cross_val_score错误...
- 短视频App风起云涌 工具+社交属性聚拢用户
- vue 父子之间通信及非父子之间通信
- Object-C,NSSet,不可变集合
- weui 开发文档
- 计算机的论文初稿要交什么,论文初稿
- Excel添加下拉选项菜单的方法
- noi题目答案c语言,NOI2019基础知识题库
- 荣耀magicbookpro升级鸿蒙,魔法互传功能再升级 荣耀MagicBook 2019发布 售价3999元起...
- 移动GIS开发:手机基站定位+离线切片地图(矢量vtpk+栅格tpk)导航安卓APP
- 程序员放弃阿里60w年薪,选到手5k的公务员,网友评论:后悔去吧
- 字节跳动校招面试题演练
- eclipse插件集
- 深圳首个“别墅”旧改项目规划出炉:超45万㎡!华侨城操盘
- matlab受力曲线导入adams中,如何在adams中导入dxf曲线
热门文章
- HPUX11.31环境下,更换HBA卡后的配置操作(HP-UX)
- 简单扫一下官文 - 11G Release2 新特性
- oracle database link创建
- redis zset转set 反序列化失败_7000字 Redis 超详细总结、笔记!建议收藏
- MongoDB 学习-MongoDB 的基本操作(二)
- 基于JAVA+Servlet+JSP+MYSQL的保险管理系统
- AnnotationTransactionAttributeSource is only available on Java 1.5 and higher
- 正则表达式 实现计算器
- 编译的 Ruby 2.3.0 缺少 openssl 支持的解决方法 (已解决)
- 初识多线程之基础知识与常用方法