Vue 全宇宙最浪 VSCode 配置、插件

Easter79
• 阅读 346

image

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

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

基本配置

  • 在编译器 文件 >> 首选项 >> 设置,可以拷贝相面的选项后搜索相关配置
  • 设置制表符等于空格数为 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/

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 会自动处理一些语法问题

image

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
2个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
2个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
2个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
2个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue