脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前言

以前公司的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 的冲突修复

由于需要同时使用prettiereslint,而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,
}

效果预览

属性强制对齐.gif

其他.gif

最后

这下再也不用看到别人代码一团糟吐槽了。第一次折腾vscode,参考了很多网上大佬的文章,但是感觉这个配置好像还差了哪里,但又始终不知道问题在哪里,热烈欢迎大家交流指教。

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过