zqy233的前端学习笔记vscode常用插件
Chinese
适用于 VS Code 的中文（简体）语言包
ES7 React/Redux/GraphQL/React-Native snippets
提供很多react代码的快捷键，灰常的好用
Bracket Pair Colorizer
彩虹色括号匹配，体验效果非常好
Indent Rainbow
彩虹色缩进，搭配Bracket Pair Colorizer，项目变成彩虹色
Auto Close Tag和Auto Rename Tag
前者自动闭合标签，后者修改标签会同步对应闭合标签
vetur
提供vue代码高亮和格式化
vetur对prettier进行设置，格式化vue代码
json
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true, // 如果为 true，将使用单引号而不是双引号
"semi": false, // 是否在每行末尾添加分号
"printWidth": 1000, // 每行超过多少字符自动换行
"wrapAttributes": false, // html标签属性换行
"trailingComma": "none" // 尽可能控制尾随逗号的输出
}
}
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true, // 如果为 true，将使用单引号而不是双引号
"semi": false, // 是否在每行末尾添加分号
"printWidth": 1000, // 每行超过多少字符自动换行
"wrapAttributes": false, // html标签属性换行
"trailingComma": "none" // 尽可能控制尾随逗号的输出
}
}
live server
用于热加载html
可以在settings.json中添加浏览器路径，设置live server所打开的浏览器
json
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Internet Explorer\\iexplore.exe"
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Internet Explorer\\iexplore.exe"
eslint
不校验下一行
js
// eslint-disable-next-line
// eslint-disable-next-line
删除vue脚手架的eslint
sh
npm uninstall @vue/cli-plugin-eslint babel-eslint eslint eslint-plugin-vue
npm uninstall @vue/cli-plugin-eslint babel-eslint eslint eslint-plugin-vue
如果是集成至package.json，则主要在rule属性中设置eslint校验规则
json
"eslintConfig": {
"root": false,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-prototype-builtins": "warn",
"no-unused-vars": "warn",
"no-undef": "warn",
"no-undefined": "warn"
}
},
"eslintConfig": {
"root": false,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-prototype-builtins": "warn",
"no-unused-vars": "warn",
"no-undef": "warn",
"no-undefined": "warn"
}
},
prettier
常用的配置，在settings.json中设置
json
// 如果为 true，将使用单引号而不是双引号
"prettier.singleQuote": true,
// 每个制表符占用的空格数
"prettier.tabWidth": 5
// 当箭头函数仅有一个参数时加上括号
"prettier.arrowParens": "avoid",
// 控制对象字面量的空格输出
"prettier.bracketSpacing": true,
// 是否在每行末尾添加分号
"prettier.semi": false,
// 指定每行代码的最佳长度， 如果超出长度则换行
"prettier.printWidth": 100,
// 尽可能控制尾随逗号的输出。 有效选项： '无' - 无尾随逗号 ' es5' - 在ES5中有效的尾随逗号（对象，数组等） 'all' - 尾随逗号 尽可能（函数参数）
"prettier.trailingComma": "none",
// 如果为 true，将使用单引号而不是双引号
"prettier.singleQuote": true,
// 每个制表符占用的空格数
"prettier.tabWidth": 5
// 当箭头函数仅有一个参数时加上括号
"prettier.arrowParens": "avoid",
// 控制对象字面量的空格输出
"prettier.bracketSpacing": true,
// 是否在每行末尾添加分号
"prettier.semi": false,
// 指定每行代码的最佳长度， 如果超出长度则换行
"prettier.printWidth": 100,
// 尽可能控制尾随逗号的输出。 有效选项： '无' - 无尾随逗号 ' es5' - 在ES5中有效的尾随逗号（对象，数组等） 'all' - 尾随逗号 尽可能（函数参数）
"prettier.trailingComma": "none",
不格式化
js
/* prettier-ignore */
/* prettier-ignore */