别人的那一堆配置、插件我就不写了~

首先进入官网下载并安装。

基本配置

  • 在编译器 文件 >> 首选项 >> 设置,可以拷贝相面的选项后搜索相关配置
  • 设置制表符等于空格数为 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.eslintIntegration": true,
"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 配置、插件的更多相关文章

  1. 二、vue之 使用vscode配置

    vue之 使用vscode配置 visual  studio code 简称vscode,下图为图标 ... 开启vscode ... 1.导入文件夹,选择菜单栏 文件-打开文件夹->选择相应已 ...

  2. VSCode配置简单的vue项目

    VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...

  3. 在.vue文件中让html代码自动补全的方法(支持vscode)

    在.vue文件中让html代码自动补全的方法(支持vscode) https://blog.csdn.net/qq_36529459/article/details/79196763 "fi ...

  4. 在不同电脑设备之间, 同步 VSCode 的插件和配置

    前提有一个码云或者github的账户,以下是我用github的示例(只有第二步不一样): Step1. 安装 同步插件"Settings Sync" Step2. 进入github ...

  5. vscode eslint插件对vue文件无效

    vscode配置好了之后,只对.js文件提示 vue文件没有效果 改成如下配置就好了. "eslint.validate": [ "javascript", & ...

  6. VSCode配置Go插件和第三方拓展包

    前言 VSCode现在已经发展的相当完善,很多语言都比较推荐使用其来编写,Go语言也一样,前提你电脑已经有了Go环境和最新版本的VSCode 插件安装 直接在拓展插件中搜索Go,就可以安装Go插件 安 ...

  7. vscode 配置 Pug Compile Hero Pro 插件步骤

    这个随笔主要介绍 vscode 配置 Pug Compile Hero Pro 插件的步骤,实现快速使用less 以及 scss 等的编程语言 第一步 当然是安装我们的插件啦! 在插件商店里 搜 Sa ...

  8. vscode 常用插件安装

    设置中文语言使用快捷键[Ctrl+Shift+P],弹出的搜索框中输入[configure language],然后选择搜索出来的[Configure Display Language],locale ...

  9. 最全的Visual Studio Code配置及使用教程

    史上最全vscode配置使用教程 工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使用一款前端开发工具.但前端开发工具数不胜数,像HBuilder.Sublime Text.WebStorm ...

随机推荐

  1. Mybatis实例及配置(一)

    创建实体类: package com.test.mybatis.bean; public class Employee { private Integer id; private String las ...

  2. [Java数据结构]Map的contiansKey和List的contains比较

    Map的containskey方法使用哈希算法查找key是否存在,运算时间是常数: List的contains方法是将元素在列表中遍历,运算时间和列表长度有关. 我使用两种不同SQL语句获取两种不同类 ...

  3. java集合类源码学习二

    我们查看Collection接口的hierarchy时候,可以看到AbstractCollection<E>这样一个抽象类,它实现了Collection接口的部分方法,Collection ...

  4. mysqli报错注入常见函数

    以下均摘自<代码审计:企业级Web代码安全架构>一书 1.floor() select * from test where id=1 and (select 1 from (select ...

  5. JavaScript 伪Ajax请求

    伪Ajax 通过iframe以及form表单,可以实现伪Ajax的方式. 并且它的兼容性是最好的. iframe iframe标签能够获取一个其他页面的文档内容,这说明它内部肯定是发送了一个请求,并且 ...

  6. [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 ...

  7. [剑指Offer]26-树的子结构

    题意 判断一棵树(参数二)是不是另一棵树(参数一)的子结构. 题解 递归第一棵树,找两棵树中值一样的节点.若找到后,用另一个函数判断以相同值得节点为根的树2是不是树1的子结构. 代码 class Tr ...

  8. hystrix元素详解

    转自https://www.cnblogs.com/wanggangblog/p/8550218.html package com.example.demo.service; import org.s ...

  9. 关于excel表格中只复制筛选后的数据

    今天笔者在整个一个表格中的数据,需要将原表格的数据根据一些条件筛选后,整理到新的excel表中 但是发现每次操作,都将筛选条件之外的数据也粘贴进去了,但笔者确实又只选中了部分数据 经过多种方式尝试后, ...

  10. 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳

    学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 ...