更新日期: 2021/12/18
win10彻底卸载vscode
- 设置 > 应用程序和功能 ：搜索code， 然后点击卸载
- win+R 打开：
%appdata%, 删除 Code 和 Visual Studio Code 文件夹 - win+R 打开:
%userprofile%, 删除 .vscode 文件夹
代码高亮与格式化
vue代码高亮
- TypeScript Vue Plugin
- Vue Language Features
格式化
- Prettier - Code formatter
prettier.config.js
module.exports = {
printWidth: 80, // 每行代码长度（默认80）
semi: false, // 声明结尾使用分号(默认true)
singleQuote: true, // 使用单引号（默认false）
endOfLine: 'auto',
tabWidth: 2, // 每个tab相当于多少个空格（默认2）
trailingComma: 'none', // 多行使用拖尾逗号（默认none）, 也可以设置为es5,让prettier自动加逗号, 方便开发时给对象增加属性
bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
bracketSameLine: true // 是否把标签的'>' 和属性放在同一行
}
自动格式化/自动保存配置
代码提示,代码模板与自动引入
- Easy Snippet
- Vue 3 Support - All In One
- Visual Studio IntelliCode
- Auto Import
代码片段配置
js模板
// @prefix prettier
// @description perttier配置
module.exports = {
printWidth: 80, // 每行代码长度（默认80）
semi: false, // 声明结尾使用分号(默认true)
singleQuote: true, // 使用单引号（默认false）
endOfLine: "auto",
tabWidth: 2, // 每个tab相当于多少个空格（默认2）
trailingComma: "es5", // 多行使用拖尾逗号（默认none, 表示不自动添加）es5表示强制添加拖尾逗号
bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
arrowParens: "avoid", // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
bracketSameLine: true, // 是否把标签的'>' 和属性放在同一行
};
// @prefix importFrom
// @description 引入依赖
import $1 from '$2'
// @prefix v3Reactive
// @description reactive变量
const $1 = reactive($2)
// @prefix v3Ref
// @description ref变量
const $1 = ref($3)
// @prefix eslintDisableMutilLine
// @description 禁止对多行的eslint检测
$BLOCK_COMMENT_START eslint-disable $BLOCK_COMMENT_END
$TM_SELECTED_TEXT
$BLOCK_COMMENT_START eslint-disable $BLOCK_COMMENT_END
// @prefix eslintDisableNext
// @description 禁止对下一行进行eslint检测
$LINE_COMMENT eslint-disable-next-line
// @prefix importEleIcon
// @description 引入ElementPlus的图标
import { $1 } from "@element-plus/icons-vue";
ts模板
// @prefix importFrom
// @description 引入依赖
import $1 from '$2'
// @prefix v3Reactive
// @description reactive变量
const $1 = reactive($2)
// @prefix v3Ref
// @description ref变量
const $1 = ref<$2>($3)
// @prefix eslintDisableMutilLine
// @description 禁止对多行的eslint检测
$BLOCK_COMMENT_START eslint-disable $BLOCK_COMMENT_END
$TM_SELECTED_TEXT
$BLOCK_COMMENT_START eslint-disable $BLOCK_COMMENT_END
// @prefix eslintDisableNext
// @description 禁止对下一行进行eslint检测
$LINE_COMMENT eslint-disable-next-line
// @prefix importEleIcon
// @description 引入ElementPlus的图标
import { $1 } from "@element-plus/icons-vue";
vue3模板
// @prefix vue3-setup-ts // @description vue3 setup语法糖模板
// @description
<!--
$1
@author: pan
@createDate: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}
-->
<script setup lang="ts">
$0
</script>
<template>
<div>$TM_FILENAME_BASE</div>
</template>
<style lang="less" scoped></style>
// @prefix vue3-ts // @description vue3的ts模板
// @description
<!--
$1
@author: pan
@createDate: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}
-->
<script lang="ts">
export default{
name:'$TM_FILENAME_BASE',
data(){
return {}
},
method:{}
}
</script>
<template>
<div>$TM_FILENAME_BASE</div>
</template>
<style lang="less" scoped></style>
代码之间快速跳转
- vue-peek (这个可以在安装完其他插件之后,先试试vue自定义组件能否正常跳转,如果可以,就没必要安装了或可以禁用了)
- CSS Navigation
- 别名路径跳转
html标签自动补全/重命名/高亮
- Auto Rename Tag
- Auto Close Tag
- Highlight Matching Tag
- Error Lens
代码检查
- ESLint
- ESLint Chinese Rules
注释和待办
- Better Comments
- Bookmarks
- Line Highlight Bookmark
- TODO Tree
git插件
- GitLens
- Git Graph
其他插件
- Intelli Refactor 增强vscode的代码重构功能
- Parameter Hints 在js/ts中像webstorm一样直接显示参数类型
- Template String Converter 如果字符串中存在模板字符串，则将双引号自动变为模板字符串方式
- Version Lens 显示依赖的最新版本
- VS DocBlockr 增强doc功能
- JSDoc Markdown highlighting
- Project Manager
- Less IntelliSense
- SCSS IntelliSense
- JSDoc Link
- Live Share
- Jest Runner
- 驼峰翻译助手
- Code Runner
- Turbo Console Log
- Import Cost
- Quick Task
- JSON to TS
- npm Intellisense
- SVG
- dir tree generator
- Material Icon Theme
配置Code Runner直接执行ts
- 安装:
npm install typescript ts-node -g - 在项目目录下执行
tsc --init生成 tsconfig.json 文件 - 修改tsconfig.json文件的“target”为最新标准es6
如果是vue2项目，请继续安装如下插件
- vue peek
- vue-helper
