【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中的