[JavaScript] 基于Visual Studio Code搭建Vue开发环境

• 按下ctrl+p, 输入: > Config, 选择： “Configure Display Language"
  
  
  
  
  image.png
  
• 将原先的：
  
  
  
  
  
  image.png
  
  修改为：
  
  
  
  
  
  image.png
  
  
  

Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript等等

{
  "files.autoSave": "off",
  "files.autoSaveDelay": 1000,
  "team.showWelcomeMessage": false,
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",{
      "language": "vue",
      "autoFix": true
    },  
    "javascriptreact",
    "html",
    "vue"
  ],
  "eslint.options": {
    "plugins": ["html"]
  },
   //为了符合eslint的两个空格间隔原则
  "editor.tabSize": 2,
  "eslint.enable": true
}

// 统一换行符，"\n" unix(for LF) and "\r\n" for windows(CRLF)，默认unix
// off或0: 禁用规则
'linebreak-style': 'off'

module.exports = {
  // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有   "root": true，它就会停止在父级目录中寻找。
  root: true,
  // 对Babel解析器的包装使其与 ESLint 兼容。
  parser: 'babel-eslint',
  parserOptions: {
    // 代码是 ECMAScript 模块
    sourceType: 'module'
  },
  env: {
    // 预定义的全局变量，这里是浏览器环境
    browser: true,
  },
  // 扩展一个流行的风格指南，即 eslint-config-standard
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    // 此插件用来识别.html 和 .vue文件中的js代码
    'html',
    // standard风格的依赖包
    "standard",
    // standard风格的依赖包
    "promise"
  ],
  //配置的一些规则
  'rules': {
  // allow paren-less arrow functions
  'arrow-parens': 0,
  // allow async-await
  'generator-star-spacing': 0,
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "indent": [
      "error",
      "tab"
    ],
    "linebreak-style": "off",
    "quotes": [
      "error",
      "double"
    ],
    "semi": [
      "error",
      "never"
    ]
  }
}