开发工具Web前端开发，目前主流的两个工具：WebstormVscodeWebstorm是一个前端集成开发工具（IDE），研发公司是jetbrains，提供社区版（免费）和商业版（付费），入门级开发，社区版基本够用。优点是Webstorm环境的集成比较完善，功能的使用也比较容易上手。下载地址VsCode如果你追求定制化，那么Vscode是你的首选。它是微软开源的一款免费的代码编辑器，拥有比较完善的插件生态。下载地址关于VsCode主题，我个人比较喜欢用solarized主题。一般来说，酷黑是编程的首选主题，但是对于我来说，黑色看久了会不舒服，所以我一般会选择明亮暖色的主题。主题地址https://github.com/altercatio...基础插件Vscode的插件生态确实丰富。下面介绍一些我常用的插件：Vscode中文汉化包AutoCloseTag自动关闭标签。自动重命名标签尾部闭合标签同步修改。BracketPairColorizer突出显示具有不同颜色的匹配括号。突出显示匹配标签突出显示所选标签。Vscode-iconsVSCode文件图标。CodeSpellChecker单词拼写检查器。ImprotCost导入包大小显示。GitLens查看Git信息。颜色信息颜色视图。CSSPeek提示。Prettier-代码格式化程序代码格式化。基本设置打开vscode设置界面：Windows/Linux-File>Preferences>SettingsmacOS-Code>Preferences>Settings设置有效范围，PriorityFolder>Workspace>UserUser-全局应用，所有项目都生效。Workspace-指定生效的工作空间。文件夹-指定的文件夹生效。Vscode也支持直接编辑配置文件，Ctrl+Shift+P（??P）打开命令面板，进入OpenSettings。{"editor.fontFamily":"'SourceCodePro-regular','monospace'","editor.fontSize":15,//字体大小"editor.fontWeight":"300","editor.tabCompletion":"on","editor.formatOnSave":true,"editor.wordWrap":"on",//代码根据编辑器窗口大小自动换行"files.autoSave":"onFocusChange"//编辑器更新后自动保存失去重点在项目开发中使用Prettier和Eslint之前，我们会制定一些代码规范，使用Eslint来检查代码，使用Prettier来保证格式的一致性。安装Eslint：npminstalleslint--save-dev新建一个.eslintrc.js文件，下面是我的配置：module.exports={env:{browser:true,es2021:true,},extends:["eslint:recommended","plugin:prettier/recommended",],parserOptions:{ecmaVersion:12,parser:'babel-eslint',sourceType:"module",},插件:["prettier"],规则:{"prettier/更漂亮”：“错误”，}，}；安装Prettier：npminstall--save-dev--save-exactprettier新建一个.prettierrc.js文件，下面是我的配置：module.exports={//一行最多200个字符printWidth:200,//使用2个空格缩进tabWidth:4,//不使用缩进，但使用空格useTabs:false,//行尾不需要分号semi:false,//使用单引号singleQuote:true,//对象的key只在必要时引用quoteProps:'as-needed',//jsx不使用单引号，而是双引号jsxSingleQuote:false,//末尾不需要逗号trailingComma:'none',//大括号首尾要有空格bracketSpacing:true,//jsx标签后面的尖括号不需要换行jsxBracketSameLine:true,//箭头函数，只有一个参数时，也需要括号arrowParens:'always',//每个文件格式化的范围是文件的全部内容rangeStart:0,rangeEnd:Infinity,//不需要在文件开头写@prettierrequirePragma:false,//不需要自动插入@prettierinsertPragma:false,//使用默认包装标准proseWrap:'preserve',//根据显示样式判断html是否折叠htmlWhitespaceSensitivity:'css',endOfLine:'lf',extends:['plugin:prettier/recommended','prettier/flowtype','prettier/vue']}介绍了我在vscode中常用的一些插件和基本配置，欢迎留言
