vscode配置uniapp

1. 安装插件

打开 VS Code，按下快捷键 `Ctrl + Shift + X` 或者点击侧边栏中的插件按钮，搜索 uniapp 并安装。

2. 配置自动补全

打开 VS Code 的设置，搜索 `emmet`，找到 `Emmet: Include Languages`，点击 `Edit in settings.json`，在打开的文件中添加以下配置：

"emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "wxml": "html",
    "uniapp": "html"
  }

3. 配置 eslint

在 VS Code 中安装 eslint 插件，并在项目根目录下创建 `.eslintrc.js` 配置文件，可以使用以下配置：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': 'off',
    'no-debugger': 'off',
    'no-unused-vars': 'off',
    'vue/no-unused-vars': 'off',
    'vue/no-side-effects-in-computed-properties': 'off',
    'vue/no-unused-components': 'off',
    'vue/no-parsing-error': 'off',
  },
}

4. 配置 prettier

在 VS Code 中安装 prettier 插件，并在项目根目录下创建 `.prettierrc` 文件，可以使用以下配置：

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid"
}

5. 配置样式

在 VS Code 中安装 Material Icon Theme 插件，并在设置中搜索 `Icons: Associations`，在打开的文件中添加以下配置：

{
  "fileExtensions": {
    "vue": "vue",
    "wxml": "html",
    "wxss": "css",
    "scss": "css",
    "sass": "css",
    "less": "css",
    "stylus": "css",
    "js": "javascript",
    "ts": "typescript",
    "jsx": "react",
    "tsx": "react",
    "json": "json",
    "md": "markdown",
    "html": "html",
    "uniapp": "vue",
    "wxss": "css",
    "wxs": "javascript"
  },
  "fileNames": {
    ".eslintrc.js": "eslint",
    "tsconfig.json": "typescript"
  }
}

6. 配置快捷键

在 VS Code 中打开设置，搜索 `Keyboard Shortcuts`，找到 `Open Keyboard Shortcuts(JSON)`，在打开的文件中添加以下配置：

[
  {
    "key": "ctrl+shift+l",
    "command": "editor.action.transformToLowercase",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+u",
    "command": "editor.action.transformToUppercase",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+i",
    "command": "editor.action.formatDocument",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+s",
    "command": "editor.action.organizeImports",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+shift+c",
    "command": "workbench.action.terminal.toggleTerminal"
  }
]

以上就是配置 uniapp 开发环境的方法。