【Vue】插件:六、eslint+prettier+vetur

1. 安装vscode插件

• eslint
• vetur
• prettier

2. 安装插件

确保插件eslint、eslint-plugin-vue(识别react eslint-plugin-react)已安装

3. 在eslintrc里添加插件

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
     '@vue/standard'
  ],
  globals: {
    'axios': false,
    'videojs':false,
  },
  rules: {
    // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  // parserOptions: {
  //   parser: 'babel-eslint'
  // }
}

4. 工作区|settings.json配置

4.1. 使用vetur格式化

vetur的默认代码风格化使用的就是prettier，会自动检索项目根目录下的prettier配置文件进行格式化,只有template用js-beautify-html

工作区设置

4.2. settings.json设置

{
  "editor.fontSize": 16, // 设置文字大小
  "editor.wordWrap": "on",// 换行
  "eslint.autoFixOnSave": true,// 每次保存都按eslint去修复
  "eslint.lintTask.enable": true,
  "workbench.iconTheme": "material-icon-theme",// 图标主题 

   "eslint.validate": [ // 添加 vue 支持
     "javascript",
     "javascriptreact",
     {
       "language": "vue",
       "autoFix": true
     }
  ],

  // 给js-beautify-html设置属性隔断
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned",      
      // "max_preserve_newlines": 0,// Maximum number of line breaks to 
      be preserved in one chunk (0 disables)
    },
    "prettier": {
        "singleQuote": true, // 格式化以单引号为主
    }
  }, 
  
  // "prettier.eslintIntegration": true,  // 让prettier使用eslint的代码格式进行校验,由于prettier还不识别vue,可以让prettier使用eslint的代码格式进行校验,prettier默认覆盖vscode格式化快捷键
  // "prettier.semi": false,//  声明结尾使用分号(默认true)
  // "prettier.singleQuote": true, //  使用带引号替代双引号
  // "prettier.arrowParens": "avoid", // 只有一个参数的箭头函数的参数是否 
  带圆括号（默认avoid）
  // "prettier.jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行 
  的结尾，而不是另起一行（默认false）

  // "vetur.format.defaultFormatter.js": "vscode-typescript", // 默认格式化 
  vue中的<script> region的方式,按编辑器自带的ts格式进行格式化
  // "vetur.format.defaultFormatter.html": "js-beautify-html",//默认格式化 
  vue中的<template> region的方式,由于prettier不能格式化vue文件 
  template  所以使用js-beautify-html格式化   
  // "vetur.format.scriptInitialIndent": true,// js默认偏移一个indent
  // "vetur.format.styleInitialIndent": true,// style默认偏移一个indent
  
  
  // "editor.formatOnSave": true,// 开启保存后即触发格式化
  // "editor.minimap.enabled": true, //关闭右侧快速预览

  // "files.autoSave": "afterDelay", // 文件自动保存
  // "files.autoSaveDelay": 30000, // 文件自动保存延时

  // "search.followSymlinks": false,//关闭rg.exe进程 用cnpm导致会出现 
  rg.exe占用内存很高 
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,// 函数名后增加空格
}

---

• 本文主要参考文档网址：
  VUE代码格式化配置vetur、eslint、prettier的故事
  设置vue项目eslint prettier vetur
• 其他参考文档网址：
  摆脱令人抓狂的ESlint 语法检测配置说明
  Airbnb JavaScript 编码规范
  vutur+eslint+prettier :1. visual studio code 配置vue开发环境 2. 在vscode中统一vue编码风格的方法> 3. 如何在vue项目中使用eslint+prettier格式化代码
  eslint+prettier格式化代码(非vetur,通用版本)