Vue 全宇宙最浪 VSCode 配置、插件
别人的那一堆配置、插件我就不写了~
首先进入官网下载并安装。
基本配置
- 在编译器 文件 >> 首选项 >> 设置,可以拷贝相面的选项后搜索相关配置
- 设置制表符等于空格数为 2: "editor.tabSize": 2
- 设置文件末尾增加新行:"files.insertFinalNewline": true
- 默认换行符:"files.eol": "\n
- 保存文件剪切尾随空格:"files.trimTrailingWhitespace": true
- 文件字符集编码: "files.encoding": "utf8"
使用配置文件
项目跟路径增加配置文件 .vscode/settings.json
将你的编辑器按照下面的配置进行设置,以避免常见的代码不一致和差异:
用两个空格代替制表符(soft-tab 即用空格代表 tab 符)。
保存文件时,删除尾部的空白符。
设置文件编码为 UTF-8。
在文件结尾添加一个空白行。
{
"editor.tabSize": 2,
"files.insertFinalNewline": true,
"files.eol": "\n",
"files.trimTrailingWhitespace": true,
"eslint.autoFixOnSave": true,
"editor.formatOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
},
"html"
],
"prettier.stylelintIntegration": true,
"prettier.eslintIntegration": true,
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": true,
"singleQuote": true,
"arrowParens": "always",
"trailingComma": "es5"
}
},
"path-intellisense.mappings": {
"@/": "${workspaceRoot}/src/"
}
}
增加 .editorconfig 文件
# editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
必要的插件
https://marketplace.visualstudio.com/
- Prettier - Code formatter:代码格式化 https://prettier.io/
- htmlhint:html 语法检查 https://github.com/htmlhint/HTMLHint
- ESLint:javascript 语法检查 https://eslint.org/
"prettier.eslintIntegration": true,
- stylelint:css 语法检查 https://stylelint.io/
"prettier.stylelintIntegration": true
Vetur:vue 开发工具,增加以下配置 https://vuejs.github.io/vetur/formatting.html#formatters
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
],
"vetur.validation.template": false,
"vetur.format.defaultFormatter.html": "prettyhtml"
处理 prettier 格式化配置
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": true,
"singleQuote": true,
"arrowParens": "always"
}
},
如果需要,路径 @/component/HelloWorld.vue eslint 解析出错时增加一下配置:
settings: {
"import/resolver": {
webpack: {
config: {
resolve: {
alias: {
'@': path.resolve('src'),
}
}
}
},
},
},
- vscode-icons:文件类型 icon
- Path Intellisense:自动路劲补全
- markdownlint:markdown 语法检查
- Settings Sync:编辑器配置、插件不同设备间同步
- Live Server:web 服务器
- vim:vim 方式开发(可选)
- svn:Subversion source control for VS Code
- px2rem:转换 css 样式的 px 为 rem 单位
- sftp:sftp sync extension for VS Code
- Import Cost:测量引入组件包大小,Vue 单文件组件需要增加以下配置:
"importCost.javascriptExtensions": [
"\\.jsx?$",
"\\.vue?$"
],
备注
eslint 自动处理语法问题:
Ctrl+Shift+p
输入:eslint:fix all
回车后 eslint 会自动处理一些语法问题
Vue 全宇宙最浪 VSCode 配置、插件的更多相关文章
- 二、vue之 使用vscode配置
vue之 使用vscode配置 visual studio code 简称vscode,下图为图标 ... 开启vscode ... 1.导入文件夹,选择菜单栏 文件-打开文件夹->选择相应已 ...
- VSCode配置简单的vue项目
VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...
- 在.vue文件中让html代码自动补全的方法(支持vscode)
在.vue文件中让html代码自动补全的方法(支持vscode) https://blog.csdn.net/qq_36529459/article/details/79196763 "fi ...
- 在不同电脑设备之间, 同步 VSCode 的插件和配置
前提有一个码云或者github的账户,以下是我用github的示例(只有第二步不一样): Step1. 安装 同步插件"Settings Sync" Step2. 进入github ...
- vscode eslint插件对vue文件无效
vscode配置好了之后,只对.js文件提示 vue文件没有效果 改成如下配置就好了. "eslint.validate": [ "javascript", & ...
- VSCode配置Go插件和第三方拓展包
前言 VSCode现在已经发展的相当完善,很多语言都比较推荐使用其来编写,Go语言也一样,前提你电脑已经有了Go环境和最新版本的VSCode 插件安装 直接在拓展插件中搜索Go,就可以安装Go插件 安 ...
- vscode 配置 Pug Compile Hero Pro 插件步骤
这个随笔主要介绍 vscode 配置 Pug Compile Hero Pro 插件的步骤,实现快速使用less 以及 scss 等的编程语言 第一步 当然是安装我们的插件啦! 在插件商店里 搜 Sa ...
- vscode 常用插件安装
设置中文语言使用快捷键[Ctrl+Shift+P],弹出的搜索框中输入[configure language],然后选择搜索出来的[Configure Display Language],locale ...
- 最全的Visual Studio Code配置及使用教程
史上最全vscode配置使用教程 工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使用一款前端开发工具.但前端开发工具数不胜数,像HBuilder.Sublime Text.WebStorm ...
随机推荐
- Mybatis实例及配置(一)
创建实体类: package com.test.mybatis.bean; public class Employee { private Integer id; private String las ...
- [Java数据结构]Map的contiansKey和List的contains比较
Map的containskey方法使用哈希算法查找key是否存在,运算时间是常数: List的contains方法是将元素在列表中遍历,运算时间和列表长度有关. 我使用两种不同SQL语句获取两种不同类 ...
- java集合类源码学习二
我们查看Collection接口的hierarchy时候,可以看到AbstractCollection<E>这样一个抽象类,它实现了Collection接口的部分方法,Collection ...
- mysqli报错注入常见函数
以下均摘自<代码审计:企业级Web代码安全架构>一书 1.floor() select * from test where id=1 and (select 1 from (select ...
- JavaScript 伪Ajax请求
伪Ajax 通过iframe以及form表单,可以实现伪Ajax的方式. 并且它的兼容性是最好的. iframe iframe标签能够获取一个其他页面的文档内容,这说明它内部肯定是发送了一个请求,并且 ...
- [LeetCode] 221. 最大正方形(DP)
题目 在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0 输出: 4 ...
- [剑指Offer]26-树的子结构
题意 判断一棵树(参数二)是不是另一棵树(参数一)的子结构. 题解 递归第一棵树,找两棵树中值一样的节点.若找到后,用另一个函数判断以相同值得节点为根的树2是不是树1的子结构. 代码 class Tr ...
- hystrix元素详解
转自https://www.cnblogs.com/wanggangblog/p/8550218.html package com.example.demo.service; import org.s ...
- 关于excel表格中只复制筛选后的数据
今天笔者在整个一个表格中的数据,需要将原表格的数据根据一些条件筛选后,整理到新的excel表中 但是发现每次操作,都将筛选条件之外的数据也粘贴进去了,但笔者确实又只选中了部分数据 经过多种方式尝试后, ...
- 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳
学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 ...