使用 vue-cli 初始化项目

命令行下运行：vue init webpack demo, 前几项都默认回车，Use ESLint to lint your code, 选择 Airbnb, unit test 和 e2e test 暂时选择 No。

使用 vetur 插件后格式化 vue 单引号变双引号

VS Code 默认不认识 .vue 文件，需要安装 vetur, 但是装完 vetur, 把 .vue 格式化的时候，会把 string 的引用从单引号变成双引号，导致 airbnb 报错。原因是 vetur 使用 prettier 来格式化, vetur doc 有说明。
解决办法：在项目根目录新建 .prettierrc 文件，在里面加上

{
"singleQuote":true
}

vetur 格式化文档时候默认把 trailing comma 删除

trailing comma, 特别是多行的 object 或者 array，还是有用处的。修改 .prettierrc, 添加 "trailingComma": all。[官方介绍]（https://prettier.io/docs/en/options.html),搜索 Trailing Commas。

eslint 报错：missing trailing comma

在 npm run dev 的时候，报错 http://eslint.org/docs/rules/comma-dangle Missing trailing comma 。 解决办法，在 .eslintrc.js 中添加

rules: {
  ...
  "comma-dangle": ["error", "only-multiline"],
}

官网详细说明

vue 和 node 前后端分离

在 vue-cli 生成的项目， /config/index.js, 修改 proxyTable 如下：

    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },

假如 vue 发出请求 http://localhost:8080/api/xx, 现在会转发到 http://localhost:3000/api/xx。

Turn off ESLint's formatting rules

有时候 prettier 格式化后，会与 eslint 规则冲突，prettier 官网给了一个方案，使用 eslint-config-prettier，官网说明在这里

办公室电脑的 vs code settings：

{
    "editor.fontSize": 18,
    "window.zoomLevel": 1,
    "editor.renderWhitespace": "all",
    "files.trimTrailingWhitespace": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned",
        }
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
    ],
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
    "files.hotExit": "off",
    "editor.tabSize": 2
}

vs code 安装的 extensions

• Manta's Stylus Supremacy
• Bracket Pair Colorizer
• ESLint
• Vetur
• Prettier - Code formatter
• language-stylus