使用 vue-cli 初始化項目

命令行下運(yùn)行：vue init webpack demo, 前幾項都默認(rèn)回車，Use ESLint to lint your code, 選擇 Airbnb, unit test 和 e2e test 暫時選擇 No。

使用 vetur 插件后格式化 vue 單引號變雙引號

VS Code 默認(rèn)不認(rèn)識 .vue 文件，需要安裝 vetur, 但是裝完 vetur, 把 .vue 格式化的時候，會把 string 的引用從單引號變成雙引號，導(dǎo)致 airbnb 報錯。原因是 vetur 使用 prettier 來格式化, vetur doc 有說明。
解決辦法：在項目根目錄新建 .prettierrc 文件，在里面加上

{
"singleQuote":true
}

vetur 格式化文檔時候默認(rèn)把 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"],
}

官網(wǎng)詳細(xì)說明

vue 和 node 前后端分離

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

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

假如 vue 發(fā)出請求 http://localhost:8080/api/xx, 現(xiàn)在會轉(zhuǎn)發(fā)到 http://localhost:3000/api/xx。

Turn off ESLint's formatting rules

有時候 prettier 格式化后，會與 eslint 規(guī)則沖突，prettier 官網(wǎng)給了一個方案，使用 eslint-config-prettier，官網(wǎng)說明在這里

辦公室電腦的 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