使用 vue-cli 初始化項(xiàng)目

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

使用 vetur 插件后格式化 vue 單引號(hào)變雙引號(hào)

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

{
"singleQuote":true
}

vetur 格式化文檔時(shí)候默認(rèn)把 trailing comma 刪除

trailing comma, 特別是多行的 object 或者 array物喷，還是有用處的卤材。修改 .prettierrc, 添加 "trailingComma": all。[官方介紹]（https://prettier.io/docs/en/options.html),搜索 Trailing Commas峦失。

eslint 報(bào)錯(cuò)：missing trailing comma

在 npm run dev 的時(shí)候扇丛，報(bào)錯(cuò) 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 生成的項(xiàng)目帆精， /config/index.js, 修改 proxyTable 如下：

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

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

Turn off ESLint's formatting rules

有時(shí)候 prettier 格式化后隧魄，會(huì)與 eslint 規(guī)則沖突卓练，prettier 官網(wǎng)給了一個(gè)方案，使用 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, // 是否插入冒號(hào)
    "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    "stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
    "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個(gè)選擇器中是否換行
    "files.hotExit": "off",
    "editor.tabSize": 2
}

vs code 安裝的 extensions

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