跳至主要内容

VS Code配置Vue开发环境-Vetur+ESLint+Prettier

 原文链接

学着 python，却不知不觉入了前端的坑，相比起 Django 的模板语法，Vue 实在太好用了，一接触就无法自拔。那么多好看的前端 UI 框架，简直是颜控必备啊。

之前一直用着 PyCharm 通过装 Vue.js 插件来写，但是不知道怎么使用 ESLint 校验，一格式化代码就乱，简直逼死强迫症

想起了万能的 VScode，一搜索相关内容，发现就连尤雨溪大大都在用。得知有个神器插件叫Vetur，之后装了一通乱七八糟的插件，发现 vscode 被我搞得非常难用！！！

找网上相关配置，各种推荐看的头晕眼花一贴到 vscode 里，就给种报错，或者压根就没效果。没办法，只能去读各个插件的官方文档，自己来配置吧。

本文使用到的插件：

  • Vetur

  • ESLint

  • Prettier

  • EditorConfig for VS Code

  • Bracket Pair Colorizer 2

  • Live Server

  • Better Comments

  • Auto Close Tag

  • Code Spell Checker

核心就是 Vetur+ESLint，其他的我觉得就是锦上添花的作用

快速配置

本文的配置是记录Vue CLI生成的项目，若不是，请自行处理依赖关系

  1. 打开 vscode 的插件安装，搜索上面的插件，一一安装

  2. 打开 vscode 的设置，键入以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    {
      // 保存时自动格式化代码

      "editor.formatOnSave": true,
      // eslint配置项，保存时自动修复错误
      "editor.codeActionsOnSave": {
        "source.fixAll": true
      },

      // 让vetur使用vs自带的js格式化工具，以便在函数前面加个空格
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      "javascript.format.semicolons": "remove",
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      // 指定 *.vue 文件的格式化工具为vetur
      "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
      },
      // 指定 *.js 文件的格式化工具为vscode自带
      "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
      },
      // 默认使用prettier格式化支持的文件
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

  3. 在项目的根目录建立.eslintrc.js文件，键入以下代码（Vue CLI 已带）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    module.exports = {
      root: true,
      env: {
        node: true,
      },
      extends: ['plugin:vue/essential', '@vue/standard'],
      parserOptions: {
        parser: 'babel-eslint',
      },
      rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      },
    }

  4. 在项目的根目录建立.prettierrc文件，键入以下代码

    1
    2
    3
    4
    {
      "semi": false,
      "singleQuote": true
    }

  5. 在项目的根目录建立.editorconfig文件，键入以下代码（Vue CLI 已带）

    1
    2
    3
    4
    5
    [*.{js,jsx,ts,tsx,vue}]
    indent_style = space
    indent_size = 2
    trim_trailing_whitespace = true
    insert_final_newline = true

    至此，即可完成，详细解释请看后面

Vetur

这个插件是 vscode 能优雅写 Vue 的核心，绝对的神器，它的优点：

  • 代码高亮

  • 代码片段

  • Emmet 语法支持

  • 语法错误校验检查

  • 格式化代码

  • 代码提醒

  • 对三方 UI 框架的支持

这里主要说说格式化代码相关，防止和 ESLint 打架。

从官方文档可以看出，Vetur集成了prettier，这就非常棒了。Vetur能够让 *.vue 文件中不同的块使用不同的格式化方案，<template>调用 html 格式化工具，<script>低啊用 JavaScript 格式化工具，<style>使用样式格式化工具。

默认的格式化工具

1
2
3
4
5
6
7
8
9
10
11
{
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter"
}

重要的是，这些工具已经集成！！！不需要额外下载了。

然后来进行一些设置，解决Vetur和ESlint的冲突。

打开 vscode 的设置

找个地方加入以下设置（注意最外层的{}）

1
2
3
4
5
6
7
8
{
  // 将vetur的js格式化工具指定为vscode自带的
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 移除js语句的分号
  "javascript.format.semicolons": "remove",
  // 在函数名后面加上括号，类似这种形式 foo () {}
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true
}

这里说说为什么要将 js 的格式化工具改为 vscode 自带的。查阅 Prettier 官方文档，发现不支持在函数名后面加上括号。

这点和 ESLint 冲突了，所以要更改。

ESLint

vscode 的 ESLint 插件在某个版本已经移除了"eslint.validate"这个配置选项，而网上很多教程都是使用的这个，导致一贴进 vscode 的配置文件，就开始保存和不兼容。

在新版的 ESLint 中已经支持了对*.vue文件的校验，所以无需再进行这项配置了，只需要添加一个保存时自动修复 ESLint 错误的功能就行了。

在 vscode 的配置文件中加入

1
2
3
4
5
6
{
  // eslint配置项，保存时自动修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

在项目的根目录（也就是和package.json同级的目录）建立.eslintrc.js文件，键入以下代码：

一般来说使用 Vue CLI 生成的项目，启用 ESLint 后会自动生成这个文件。

若忘了启用，自己手动 npm 安装 eslint 相关插件即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', '@vue/standard'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
}

Prettier

Vueter 虽好但只能作用于*.vue文件，其他的文件像 *.js *.html 等还需要使用 Prettier 来格式化

这里做下简单配置，来让 Prettier 更好的和和 ESLint 配合。在项目的根目录建立.prettierrc文件，键入以下代码

1
2
3
4
{
  "semi": false,
  "singleQuote": true
}

这两行代码的作用是去除语句结尾的分号 ; ，以及使用单引号 ' 替代双引号 "

同时建议在 vscode 的配置文件中加入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  // 保存时自动格式化代码
  "editor.formatOnSave": true,
  // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 指定 *.vue 文件的格式化工具为vetur，防止和prettier冲突
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 指定 *.js 文件的格式化工具为vscode自带，以符合ESLint规范
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  }
}

为符合 ESLint 规范，建议将不要使用 Prettier 来对 js 进行格式化，手动指定自带格式化工具

EditorConfig for VS Code

EditorConfig 主要是用于让 vscode 支持.editorconfig文件。

.editorconfig 文件中的设置用于在基本代码库中维持一致的编码风格和设置，例如缩进样式、选项卡宽度、行尾字符以及编码等，并且它还是跨编辑器的

你需要和 ESLint 的配置相符

否则会出现你格式化代码以后，却不能通过你的代码校验工具的检验

可以这样说，EditorConfig 是让代码创建前保持规范， Prettier 是让代码保存后保持规范

示例：

1
2
3
4
5
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

Bracket Pair Colorizer 2

安装即可，无需额外配置

有了它，你再也不怕找不到匹配的各种括号了。他会给匹配的括号赋予同样的颜色，并且给你圈出范围来

Live Server

为静态和动态页面生成一个具有实时重新加载功能的本地开发服务器，可以右击直接在浏览器查看

Better Comments

更好看的注释，更好的区分各个地方了

Auto Close Tag

自动闭合标签

Code Spell Checker

单词校验插件，可以避免很多错误，单词写错造成的bug，一言难尽，强烈安利

标签：

评论

发表评论

此博客中的热门博文

Resolving errSecInternalComponent errors during code signing

原文链接 One code signing issue I commonly see, both here on DevForums and in my Day Job™ with DTS, is that the codesign command fails with errSecInternalComponent. This issue crops up in a wide variety of circumstances and the correct fix depends on the specific problem. This post is my attempt to clarify the potential causes of this error and help folks resolve it. If you have any questions or comments about this, please start a new thread, tagging it with Code Signing so that I see it. Share and Enjoy — Quinn “The Eskimo!” @ Developer Technical Support @ Apple let myEmail = "eskimo" + "1" + "@" + "apple.com" Resolving errSecInternalComponent errors during code signing In some circumstances the codesign command might fail with the error errSecInternalComponent. For example: % codesign -s "Apple Development" "MyTrue" MyTrue: errSecInternalComponent This typically affects folks who are signing code in a nonstandard environm...
发表评论
阅读全文

iOS：检测使用VPN或Proxy

参考链接： https://www.jianshu.com/p/c3b950dbf86a https://gist.github.com/PramodJoshi/4faad4c91f7dcb4eb9b06be8390c01db http://noodlecode.net/2018/04/check-if-ios-app-is-connected-to-vpn 第一种方法 需要导入框架CFNetwork 然后，这个方法是mrc的：需要添加-fno-objc-arc的flag 代码如下： + ( BOOL )getProxyStatus { NSDictionary *proxySettings = NSMakeCollectable ([( NSDictionary *) CFNetworkCopySystemProxySettings () autorelease]); NSArray *proxies = NSMakeCollectable ([( NSArray *) CFNetworkCopyProxiesForURL (( CFURLRef )[ NSURL URLWithString: @"http://www.google.com" ], ( CFDictionaryRef )proxySettings) autorelease]); NSDictionary *settings = [proxies objectAtIndex: 0 ]; NSLog ( @"host=%@" , [settings objectForKey:( NSString *)kCFProxyHostNameKey]); NSLog ( @"port=%@" , [settings objectForKey:( NSString *)kCFProxyPortNumberKey]); NSLog ( @"type=%@" , [settings objectForKey:( NSString *)kCFProxyTypeKey]); if ([[settings object...
发表评论
阅读全文

去广告DNS设置，国内ADGuard DNS方案，手机电脑iOS去广告，保护隐私

 原文链接 之前分享过使用mac系统搭建adguard home，这几个月用下来零零散散基本上也被弃用了。主要原因是因为需要保持电脑一直开机。但是我的电脑是笔记本，存在移动各个地域的情况，也就是说只能够屏蔽电脑自身，对于手机而言不太现实。今天偶然发现dnspod推出了高级版的公共解析。dnspod背靠腾讯云，肯定是合法合规的公共解析服务，这个高级版用起来不错。 国内自己搭建解析服务是违法行为，所以这也是为什么使用dnspod的原因。 后台截图 开始使用 首先我们先进入dnspod的公共解析页面，点击开始使用。 专业版公共解析 dnspod会提供几种预设，我们选择「开发者」即可 开发者 然后你就成功的申请到自己个人使用的dns了！ 更新拦截规则 我们可以将常见的广告过滤规则加入到dns中。我们在顶部选项卡中选择「拦截规则」。 拦截规则设置 打开adguard adguard 绑定iOS设备 推荐使用描述文件的方式，删除配置时删除描述文件即可。 描述文件 绑定macOS 推荐使用描述文件的方式，删除配置时删除描述文件即可。 描述文件 mac需要在「系统偏好设置」的「网络」中查看是否正在运行。 代理 如果没有运行需要点击「···」来启动服务。 启动服务 绑定路由器 找到自己路由器的DHCP设置，修改dns，然后记得绑定自己的ip。 修改dns 绑定ip 费用 目前有300万次/月的免费额度，但没有超出之后的价格。300万次一个人比较难用完，可以放心使用。 我个人使用iOS设备两台、智能家居、电脑两台，日均请求数大致2万/日。 判断是否搭建成功 可以通过查看日志的方式，日志大概有半小时到一小时的延迟，请耐心等待。
发表评论
阅读全文