一、VsCode 前端常用插件推荐
vscode既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode还是一款免费并且有团队持续快速更新的代码编辑器。所以vscode是代码编辑器的首选,个人推荐编写前端代码时,代码编辑器选择vscode
1.1 vscode 如何安装插件
vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效。
当你不需要某个插件时只需要进入扩展,点击对应插件右下角的齿轮按钮即可选择禁用或卸载该插件。
1.2 前端必备常用插件
- Chinese (Simplified) (必备):vscode汉化包
- HTML Boilerplate (必备):通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构。
- HTML Snippets (必备):智能提示HTML标签,以及标签含义
- HTML CSS Support (必备):智能提示CSS类名以及id
- Color Info(必备):提供你在 CSS中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。
- CSS Peek(必备):使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。
- cssrem(必备):一个 px 与 rem 单位互转的 VSCode 插件
- Easy LESS:它可以直接编译less 自动保存为css文件
- Auto Close Tag (必备):自动闭合HTML/XML标签
- Auto Rename Tag (必备):自动完成另一侧标签的同步修改
- Prettier:格式化JavaScript / TypeScript / CSS
- ESLint (推荐):js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置,日后我也会专门针对eslint配置写一篇文章。
- JavaScript(ES6) code snippets (必备):ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
- Open in Browser(必备):支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari
- Path Intellisense (必备):自动提示文件路径,支持各种快速引入文件
- npm(必备):让VSCode支持npm
- Vetur (vue开发必备):Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
- jQuery Code Snippets (jquery开发必备):jQuery代码智能提示
- VueHelper:vue代码片段
- Vue TypeScript Snippets:vue的 typescript 代码片段
- Vue 2 Snippets:vue 2代码片段
二、编辑器setting.json设置
点击左上角 文件 -> 首选项 -> 设置 ->
在vscode编辑器 setting.json 中加如下配置
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
}
三、在VsCode里面设置vue文件模板
首先:我们要找到这个模板设置的入口
在文件 - > 首选项 - > 用户代码片段
选中以后,会出现下面这个输入框,新建一个vue.json全局代码片段文件,输入vue.json然后回车。
然后在vue.json 里面将下面代码粘贴进去,然后保存
{
"vue-template": {
"prefix": "vue",
"body": [
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" components: {},",
" props: {},",
" data() {",
" return {};",
" },",
" computed:{},",
" watch:{},",
" created () {},",
" mounted () {},",
" methods: {},",
"}",
"</script>",
"<style scoped>",
"",
"</style>"
]
}
}
之后再写.vue文件,只要输入vue就会出现相对应的代码提示
按enter键就可以直接快速创建一个完整的vue文件模板了