最近新安装了 vscode，对它进行一次全新的配置，之前都是随便配了能用就行。
主要使用 ESLint + Premitter + Vetur + koroFileHeader。
最终效果：
新建文件：自动添加文件信息（auther，createTime，lastUpdateTime 等）；对函数一键注释信息。
保存时自动格式化：去除分号；自动缩进；函数名后 括号前后自动加空格等。
一开始安装了 beautify 和 vetur 进行格式化，但发现格式化的效果不尽如人意，对 vue template 中的代码效果不好。后面采用上面的前三个结合。
koroFileHeader 是对文件或函数头进行注释，具体文档 kotoFileHeader
1 安装插件
在 vscode 左侧 extensions 中，搜索以上插件。
Extensions.png
2 打开配置选项
打开 vscode setting.json。vscode 左下角 设置图标 -> settings -> 右上角 open settins(JSON) 图标。
open setting.png
3 配置 setting.json
以下是我的配置项：
{
// 代码文件头部注释
"fileheader.customMade": {
"Descripttion": "",
"Version": "1.0",
"Author": "pj",
"Date": "Do not edit",
"LastEditors": "pj",
"LastEditTime": "Do not edit"
},
// 函数注释
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},
"fileheader.configObj": {
"createFileTime": true,
"language": {
"languagetest": {
"head": "/$$",
"middle": " $ @",
"end": " $/",
"functionSymbol": {
"head": "/** ",
"middle": " * @",
"end": " */"
},
"functionParams": "js"
}
},
"autoAdd": true,
"autoAddLine": 100,
"autoAlready": true,
"annotationStr": {
"head": "/*",
"middle": " * @",
"end": " */",
"use": false
},
"headInsertLine": {
"php": 2,
"sh": 2
},
"beforeAnnotation": {
"文件后缀": "该文件后缀的头部注释之前添加某些内容"
},
"afterAnnotation": {
"文件后缀": "该文件后缀的头部注释之后添加某些内容"
},
"specialOptions": {
"特殊字段": "自定义比如LastEditTime/LastEditors"
},
"switch": {
"newlineAddAnnotation": true
},
"supportAutoLanguage": [],
"prohibitAutoAdd": ["json"],
"folderBlacklist": ["node_modules", "文件夹禁止自动添加头部注释"],
"prohibitItemAutoAdd": [
"项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"
],
"moveCursor": true,
"dateFormat": "YYYY-MM-DD HH:mm:ss",
"atSymbol": ["@", "@"],
"atSymbolObj": {
"文件后缀": ["头部注释@符号", "函数注释@符号"]
},
"colon": [": ", ": "],
"colonObj": {
"文件后缀": ["头部注释冒号", "函数注释冒号"]
},
"filePathColon": "路径分隔符替换",
"showErrorMessage": false,
"writeLog": false,
"wideSame": false,
"wideNum": 13,
"functionWideNum": 0,
"CheckFileChange": false,
"createHeader": true,
"useWorker": false,
"designAddHead": false,
"headDesignName": "random",
"headDesign": false,
"cursorModeInternalAll": {},
"openFunctionParamsCheck": true,
"functionParamsShape": ["{", "}"],
"functionBlankSpaceAll": {},
"functionTypeSymbol": "*",
"typeParamOrder": "type param",
"customHasHeadEnd": {},
"throttleTime": 60000
},
// 代码格式化
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 4,
"vetur.format.options.tabSize": 4,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// 添加 vue 支持
"eslint.validate": ["javascript", "html", "vue"],
// 去掉代码结尾的分号
"prettier.semi": false,
"prettier.tabWidth": 4,
// 使用单引号替代双引号
"prettier.singleQuote": true,
// 让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// "vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatterOptions": {
// vue组件中html代码格式化样式
"js-beautify-html": {
// 对属性进行换行。
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
"wrap_attributes": "auto"
},
"prettier": {
"semi": false,
"singleQuote": true
}
},
"vetur.validation.template": false,
// 每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
// 代码是否按屏幕宽度换行
"editor.wordWrap": "on",
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
}
}
fileHeader 是按照相关文档配置，不使用的话可以忽略。
4 配置过程中遇到的点
- tabSize 习惯用4个空格，但把所有能搜到 tabSize 的值改为4，并且设置 "editor.tabSize": 4
和 "vetur.format.options.tabSize": 4 之后，格式化出来还是2个空格。
原因：prettier 中 tabWidth 默认是2。
解决方法：配置 "prettier.tabWidth": 4 。且适配 vue 文件的话（如去掉分号，使用单引号），需要在 vetur.format.defaultFormatterOptions 中单独配置 prettier 相关属性。详见配置。
"prettier.tabWidth": 4,
- 使用 eslint 后，代码中有声明未使用的变量，会报错，又不想挨着删除（嫌麻烦），选择不让他报错。
配置方法：package.json 中配置
"eslintConfig": {
"rules": {
"no-unused-vars": "off"
}
},
- vue 中 html 格式化，总是固定第二个属性开始换行对齐，且有的标签错位，不好看。像现在这样配置 js-beautiful-html 不管用。
原因：之前安装了 beautify ，选择了默认使用 beautify 格式化 vue 文件，js-beautiful-html 是 vetur 中的配置选项。
解决方法：将 vue 默认格式化插件改为 vetur。
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
注：prettier 插件会优先使用项目根目录下的 editorconfig 配置文件，如果没有 editorConfig 文件，会在根目录下找 .prettierrc 文件，并使用该文件中的配置。找不到 editorConfig 和 。prettierrc 文件，才会使用 setting.json 中的配置。如果有 setting.json 中配置不生效的情况，看看是否有前面两个文件。可在 setting 中配置不使用 editorConfig 的配置。settings -> 搜索 editorConfig -> Prettier: Use Edit Config，置为 false。
快捷键格式化 vue 文件的时候，会提示有两个格式化插件，让选一个，应选择 vetur，才能与 setting.json 文件中的配置相适用（主要是 js-beautify-html）。
网友评论