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 开发环境的方法。
6513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
