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

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

内容简介:以前公司的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,
}
复制代码

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

查看所有标签

猜你喜欢:

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

一个APP的诞生

一个APP的诞生

Carol 炒炒、刘焯琛 / 电子工业出版社 / 2016-7-1 / 79

在移动互联网高度发达的今天,一个个APP,成为我们通向网络世界的窗口。它的诞生流程,令不少对互联网世界产生幻想甚至试图投身其中的年轻人充满了好奇。 《一个APP 的诞生》就是这样一步一步拆分一个APP 的诞生过程。从前期市场调研,竞品分析开始,一直到设计规范,界面图标,设计基础,流程管理,开发实现,市场推广,服务设计,甚至跨界融合,都有陈述。 《一个APP 的诞生》被定义是一本教科书,......一起来看看 《一个APP的诞生》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码