以下本人使用VsCode开发 Vue使用的插件,开发起来很方便
Chinese (Simplified) Language Pack for Visual Studio Code
中文简体插件
ESLint
javascript代码检测工具
Vetur
Vue官方提供的VS Code插件
Vue 3 Snippets
基于最新的 Vue 2 及 Vue 3 的 API 的代码块
Prettier - Code formatter
代码格式化工具,支持JavaScript 、TypeScript、JSX 、JSON、CSS 、SCSS 、 Less、HTML 、 Vue等文件格式化,完美匹配Vue-Cli 创建项目中自定义选项“ Pick a linter / formatter config: Prettier”语法
Path Intellisense
文件路径补全工具,可以自定义‘@’到vue的src目录
Auto Close Tag
自动关闭 html/xml标签插件,vue文件也支持
Auto Rename Tag
自动重命名html/xml标签插件,vue文件也支持
IntelliJ IDEA Keybindings
如果习惯了WebStorm快捷键,可以安装此插件
配置 setting.json
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.quickSuggestions": true,
"eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
}
配置prettier.config.js
module.exports = {
singleQuote: true, // 使用单引号
printWidth: 150, // 超过最大值换行,可以根据项目实际设置
htmlWhitespaceSensitivity: 'css', // HTML 空白敏感度
semi: false, // 结尾不用分号
jsxBracketSameLine: true, // 多行 JSX 元素的 放在最后一行的末尾,而不是单独放在下一行
arrowParens: 'always', // 在唯一参数的箭头函数周围包含括号
vueIndentScriptAndStyle: false, // 是否缩进Vue 文件中的代码<script>和<style>标签。有些人(如Vue 的创建者)不缩进以保存缩进级别,但这可能会破坏编辑器中的代码折叠。
trailingComma: 'none' // 函数最后不需要逗号
}