开发工具

统一采用 VSCode 开发，项目默认采用 prettier 进行格式化、eslint 进行代码检测。VSCode 需要安装如下插件：

必装插件

插件名	说明
Prettier - Code formatter	代码格式化
ESLint	代码风格检测
Vetur	Vue 语法支持
GitLens — Git supercharged	Git 信息查看
vue vscode snippets	Vue 语法片段扩展
JavaScript (ES6) code snippets	ES6 提示
Auto Close Tag	自动补全结束标记
Auto Rename Tag	自动重命名
Path Intellisense	路径提示
Document This	自动生成注释
vscode-icons	文件图标
One Dark Pro	暗黑主题

推荐插件

插件名	说明
Auto Import	自动引入
Code Runner	支持执行单文件代码
Color Picker	支持颜色拾取
Debugger for Chrome	Chrome 调试插件
HTML Snippets	HTML 提示
Image preview	图片预览
IntelliSense for CSS class names in HTML	CSS 类名提示
Live Server	在线服务
Markdown Preview Enhanced	Markdown 预览
npm Intellisense	NPM 模块补全
Search node_modules	node_modules 搜索
SVG	SVG 文件查看

VSCode 设置

  // Prettier配置
  // 保存时是否自动格式化
  "editor.formatOnSave": true,
  // 默认的格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // vue文件的格式化配置
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // js文件的格式化配置
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // ESLint配置
  "editor.codeActionsOnSave": {
    // 保存时是否自动eslint修复
    "source.fixAll.eslint": false
  },
  // ESLint校验的文件格式
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    "vue",
    "html",
    "typescript",
    "typescriptreact"
  ],

  // Vetux配置
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "search.followSymlinks": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.showUnused": false,
  "vetur.validation.interpolation": false,
  "vetur.validation.script": false,

常见问题

问题 1. yarn : 无法加载文件 D:\Program Files\nodejs\yarn.ps1，因为在此系统上禁止运行脚本。

解决方法：管理身份运行 powerShell.输入命令：set-ExecutionPolicy RemoteSigned

是否要更改执行策略？输入 y ，或者直接回车