使用 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