VS Code书写vue项目配置 eslint+prettier 统一代码风格

栏目: JavaScript · 发布时间: 6年前

内容简介:以前公司的vue项目只是我一个人在写,代码风格统一,但是后来随着团队增加,统一的代码风格就越来越重要。我的主力工具是sublime,ws辅助,vscode基本很少使用(就下载安装放在冷宫),但是听说用来写vue项目还不错,就开启了一番折腾。当然工具么,没有谁好谁坏了~~ 不盲目站队,适合自己的就是最好的。目标是:首先,需要安装

以前公司的vue项目只是我一个人在写,代码风格统一,但是后来随着团队增加,统一的代码风格就越来越重要。我的主力 工具 是sublime,ws辅助,vscode基本很少使用(就下载安装放在冷宫),但是听说用来写vue项目还不错,就开启了一番折腾。当然工具么,没有谁好谁坏了~~ 不盲目站队,适合自己的就是最好的。

目标是: Eslint 校验代码语法, prettier 统一格式化代码,按下保存自动修复eslint错误,自动格式化代码(因为懒~)

安装vscode插件

首先,需要安装 VeturESLintPrettier - Code formatter 这三个插件,安装完重启下,防止插件不生效。

另外这里有个坑, Beautify 插件会占用格式化代码的快捷键,因此会和 prettier 产生冲突,所以直接禁用掉。

vscode插件配置

打开vscode工具的设置(快捷键 Ctrl + , )里面有两个设置。

一个是 USER SETTINGS(用户设置)也就是全局配置,其他项目也会应用这个配置。

另一个是WORKSPACE SETTINGS(工作区设置)也就是项目配置,会在当前项目的根路径里创建一个 .vscode/settings.json 文件,然后配置只在当前项目生效。

我把配置写在了工作区设置,配置如下:

{
    //.vue文件template格式化支持,并使用js-beautify-html插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    //js-beautify-html格式化配置,属性强制换行
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned"
      }
    },
    //根据文件后缀名定义vue文件类型
    "files.associations": {
      "*.vue": "vue"
    },
    //配置 ESLint 检查的文件类型
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    //保存时eslint自动修复错误
    "eslint.autoFixOnSave": true,
    //保存自动格式化
    "editor.formatOnSave": true
}
复制代码

ESLint 和 Prettier 的冲突修复

由于需要同时使用 prettiereslin t,而 prettier 的一些规则和 eslint 的一些规则可能存在冲突,例如 prettier 字符串默认是用双引号而 esLint 定义的是单引号的话这样格式化之后就不符合 ESLint 规则了。

所以要解决冲突就需要在 Prettier 的规则配置里也配置上和 ESLint 一样的规则,直接覆盖掉, ESLintPrettier 的配置文件内容如下:

.eslintrc.js

配置使用单引号、结尾不能有分号。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //强制使用单引号
    quotes: ['error', 'single'],
    //强制不使用分号结尾
    semi: ['error', 'never']
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

复制代码

.prettierrc

配置使用单引号、结尾不能有分号。

{
   //开启 eslint 支持
  "eslintIntegration": true,
  //使用单引号
  "singleQuote": true,
  //结尾不加分号
  "semi": false
}
复制代码

也可以直接在vscode工作区配置 prettier

{
    //开启 eslint 支持
    "prettier.eslintIntegration": true,
    //使用单引号
    "prettier.singleQuote": true,
    //结尾不加分号
    "prettier.semi": false,
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Spring in Action

Spring in Action

Craig Walls / Manning Publications / 2011-6-29 / USD 49.99

Spring in Action, Third Edition has been completely revised to reflect the latest features, tools, practices Spring offers to java developers. It begins by introducing the core concepts of Spring and......一起来看看 《Spring in Action》 这本书的介绍吧!

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具