请选择 进入手机版 | 继续访问电脑版

前端vscode开发工具环境搭建

[复制链接]
世上人间 发表于 2021-1-1 18:31:49 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

  • vscode开辟中常用插件安装
  1. Chinese (Simplified) Language Pack for Visual Studio Code                # vscode中文汉化Auto Close Tag                                       # 自动添加HTML / XML关闭标签(必备)More ActionsAuto Rename Tag                   # 自动重定名配对的HTML / XML标签(必备)Color Info                                               # 颜色提示CSS Peek                                               # 使用此插件,你可以追踪至样式表中 CSS 类和 ids 界说的地方 |HTML Boilerplate                           # 使用 HTML 模版插件HTML Snippets                           # 超等实用且低级的 H5代码片断以及提示open in browser                               # 打开html文件插件view in browser                                   # 打开html文件插件Live Server                                               # 打开html文件插件Path Intellisense                               # 路径提示Bracket Pair Colorizer             # 颜色识别匹配括号Class autocomplete for HTML        # 智能提示HTML class =“”属性(必备)NPM                                                               # Node Package Manager(node包管理器)Debugger for Chrome                               # dug断点测试json5 syntax                       # json5语法Npm Intellisense(node必备)         # require 时的包提示indent-rainbow                     # 凸显缩进着色,让你的缩进一目了然GitLens                            # 在代码中显示每一行代码的提交汗青Bootstrap 3 Snippets                   # bootstrap3语法提示Beautify                                           # 格式化 html ,js,cssjQuery Code Snippets (推荐)        # jQuery代码智能提示IntelliSense for CSS class names (推荐)             # 智能提示 css 的 class 名React/Redux/react-router Snippets (推荐)(react必备) # React/Redux/react-router语法智能提示JavaScript Code Snippets          # 用于编写js,ts,React,Vue,HHTML等的代码片断,以及ES6语法支持Icon Fonts                    # vscode图标集Dracula Official(推荐)        # 很好看的一款主题风格One Dark Pro                               # 推荐使用主题   Document This                 # 添加注释块     需要在vscode中setting.json中做的设置项        "docthis.includeAuthorTag": true,       // 出现@Author             "docthis.includeDescriptionTag": true,  // 出现@Description        "docthis.authorName": "shenzekun",      // 作者名字   
复制代码


  • 开辟vue项目必须要装的插件Vutur(必备)
  1. // Vue多功能集成插件,包罗:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开辟者必备。vscode设置中找到设置代码片断 vue.json文件,设置如下{  // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the  // same ids are connected.  // Example:  // "Print to console": {  //         "prefix": "log",  //         "body": [  //                 "console.log('$1');",  //                 "$2"  //         ],  //         "description": "Log output to console"  // }  "Print to console": {    "prefix": "vue",    "body": [      "",      "$5
  2. ",      "",      "",      "",      "",      "//@import url($3); 引入公共css类",      "$4",      ""  ],    "description": "Log output to console"  }}
复制代码


  • vscode中eslint的设置
  1. 我难以评价该插件,因为它有很多追随者,但也有很多开辟者不喜欢它。而毋庸置疑的是,该插件有助于编写轻便代码,如果你是JavaScript开辟者,那这个下载量达2400万次的扩展插件是最好的选择。# 安装eslint插件ESLint                                                           // EsLint可以资助我们检查Javascript编程时的语法错误# 安装npm依赖npm i eslint -g                                          // 全局安装eslintnpm i eslint-plugin-html -g                // 如果用到html中的js校验npm i vue-eslint-parser -g          // 如果用到vue校验,此时不要安装eslint-plugin-htmlnpm i babel-eslint -g                          // js最新语法需要在setting.json中设置如下/**  *  eslint语法检测  */  // 每次生存时将代码按eslint格式举行生存  // 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代码格式化样式  //     }  // },  // 格式化stylus, 需安装Manta's Stylus Supremacy插件  "stylusSupremacy.insertColons": false, // 是否插入冒号  "stylusSupremacy.insertSemicolons": false, // 是否插入分好  "stylusSupremacy.insertBraces": false, // 是否插入大括号  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行  "stylusSupremacy.insertNewLineAroundBlocks": false,  "editor.codeActionsOnSave": { // 两个选择器中是否换行    "source.fixAll.eslint": true  }
复制代码


  • chrome谷歌欣赏器常用插件(无需翻墙)
  1. 极简插件官网https://chrome.zzzmh.cn/
复制代码
 

来源:https://blog.csdn.net/LouMouRen/article/details/111973439
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )