VS Code for Vue 使用优化.md

VS code 使用优化

感觉代码没有正经写多久，大部分的时间都在了折腾编辑器的路上马不停蹄。哈哈，特步，永不止步。

生成一个项目 iview-cli

选择需要的配置

• 项目名字
• axios （ajax，基本都需要）
• Vuex、Bus（需要）
• less（需要）
• Echarts （看需求）

点击开始生成，然后 使用VS Code打开项目目录。

进入项目，按 “Ctrl+~”，打开命令行后，cnpm i（执行该命令的前提是已经安装过cnpm，npm网络状况不好，所以建议使用cnpm，cnpm的更新时间是10分钟） 安装依赖。

后期如果有需要升级使用npm-check这个工具，升级时需要注意，某些依赖暂时不要升级，因为可能有未知的错误，我们仅仅升级iview就可以，其他的可以尝试着进行升级（谨慎）。

插件列表

• Vetur -- Vue tooling for VS Code
• Prettier -- format JS/TS/CSS，解决了原来格式化时，将单引号格式化为双引号的问题。
• JS-CSS-HTML Formatter

重点来了

我的配置文件，当然还有很多优化空间。

{
    // 格式化
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // The number of spaces a tab is equal to. This setting is overriden
    // based on the file contents when `editor.detectIndentation` is true.
    "editor.tabSize": 4,

    // Insert spaces when pressing Tab. This setting is overriden
    // based on the file contents when `editor.detectIndentation` is true.
    "editor.insertSpaces": true,

    // When opening a file, `editor.tabSize` and `editor.insertSpaces`
    // will be detected based on the file contents.
    "editor.detectIndentation": true,
    // 控制Vue中的js缩进
    "prettier.tabWidth": 4
}

感谢

• npm升级（本地、全局）依赖
• tab 2 space
• 解决格式化问题
• 别人家的编辑器
• Vue单文件中的js缩进