# vscode 常见配置
vscode可谓是编辑器中的神器，超高的颜色，丰富的插件，重复的自定义...收获了一大堆vscode迷
以前笔者在开发vue项目时用vscode配置了在保存代码时自动按照一定规则格式化代码，这样用着是十分的爽，但是知道有一天，vscode罢工了，所以不得不在重新配置一遍，索性
就记录和总结下，vscode的常见配置把
# 下载vscode 并调成中文模式
- 下载地址：点击下载
- 有时候vscode可以自动获取电脑配置，来配置自己的中英文模式，但是有时候还是需要手动配置，索性也就记录下来 下载中文包 chinese(Simplified) Language 安装完成后，软件会提示应用并重启，然后你会发现，已经变成中午啦 假如还是不行，那就手动设置，步骤为：
Ctrl + Shift + p 输入 lang 选择 zh-ch
# 设置vscode 占用内存过大，卡顿问题
search.followSymlinks: false
git.enabled: false
git.autorefresh: false
# 安装vue项目标配插件
- Vetur
用来解析vue文件 和vue代码提示但是需要对settings.json文件进行配置 不然<template>里面的html代码还是没有代码提示，配置如下
- Ctrl + , 打开设置面板
- 点击下面的小图标
- 输入下面配置代码
"emmet.includeLanguages": {
"vue": "html",
"vue-html": "html"
}
- ESlint + pretter
代码风格管理，配置相文件，可实现保存文件自动按照eslint及pretter格式化代码 .eslintrc.js 文件
module.exports = {
root: true,
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
parser: 'babel-eslint'
},
// 指定环境
env: {
browser: true
},
extends: ['plugin:vue/essential', 'plugin:prettier/recommended'],
plugins: ['vue', 'prettier'],
rules: {
'prettier/prettier': [
'error',
{
singleQuote: true,
trailingComma: 'none',
bracketSpacing: true,
jsxBracketSameLine: true
}
],
'no-console': 0,
'space-before-function-paren': [0, 'never']
}
}
.prettierrc 文件
{
"eslintIntegration": true, //使用eslint 格式化代码
"semi": false, //使用分号
"singleQuote": true, // 使用单引号
"TrailingCooma": "none" // 引号去掉
}
配置 vscode 的setting.json 文件
"editor.formatOnSave": true, //每次保存自动格式化
"editor.codeActionsOnSave": { //按照eslint规则格式化代码
"source.fixAll.eslint": true
},
设置vscode默认格式方式是pretter
# vscode 实用插件推荐
# cssrem
px -> rem
# koroFileHeader
自动生成文件头部及函数头部注解
# Live Server
开启一个本地服务器
# Path Intellisense
路径自动补全
有时候我们会设置些快捷变量如@时路径查找貌似就失效了，是因为你没有设置,打开 setting.json
"path-intellisense.mappings": {
"@":"${workspaceRoot}/src"
}
# Vue 2 Snippets
vue2 代码补全