前言

刚上大学的我第一次接触代码，对一切都很陌生，学校的入门语言是C，最开始使用的编译器是devcpp（只有几十兆、开箱即用）。对刚入门的我来说非常友好，当时期末的时候还写了一篇博文发布在(CSDN链接),后面有一定基础以后使用vsStudio，主要是用来写c++代码。后面写接触java语言又转而使用idea。

WebStorm

很长一段时间都在写java代码,甚至前端它都拥有很好的代码提示。导致我习惯了它的快捷键，习惯这个东西很难改变。于是接触前端之后，我首选的编译器就是webStorm。它的集成度、可视化的git操作等都是它的优势。而且大多谁vscode常用的插件，webstorm 都有，比如前端工程化的代码格式化插件prettier和语法检查插件ESlint。

1、为什代码在 vscode中没有问题，打开webstorm 却在爆红、警告？前端工程化以后，代码的语法检查和格式化其实是由prettier 和 eslint 完成的，最大的好处就是编译器的无关性,这点很重要，因为每个人的习惯不一样，使用的编译器不一样，团队的成员分布很广泛，比如尤大大（vue作者）的团队就横跨很多个国家。协作过程中应该有一个统一的代码格式化标准。不管什么编译器，只要它支持相关的插件，就可以根据团队和项目的需求，统一地个性化配置项目的格式化和语法检查的标准。

那为什么还出现这种情况呢？其实是我们的插件编译器的配置不正确。

webstorm 配置prettier 和eslint: 1.使用包管理工具安装相应prettier 和 eslint 包。默认会在node_modules的目录中加入相应的包。

标准的项目一般都有自己的指定好的版本，开发者只需要执行 npm i 就可以自行安装，但是如果在从零搭建项目，就需要自己安装一下。

prettier 参考 www.prettier.cn/docs//insta...
eslint 参考 eslint.org/docs/latest...

eslint:

列举几个常用的eslint：详细配置查看官网。

env: 预定义那些环境需要用到的全局变量，可用的参数是：es6、broswer、node等。
- es6会支持所有的ECMAScript6的特性（除了模块）
- browser会添加所有的浏览器变量，比如Windows
- node会添加所有的全局变量比如global
extends: 指定扩展的配置，配置支持递归扩展，支持规则的覆盖和聚合。
plugins: 配置我们想要Linting规则的插件。
parser: 默认ESlint使用Espree作为解析器，但是一旦我们使用babel的话，我们需要用babel-eslint。
parserOptions: 当我们将默认的解析器从Espree改为babel-eslint的时候，我们需要指定parseOptions，这个是必须的。
ecmaVersion: 默认值是5，可以设置为3、5、6、7、8、9、10，用来指定使用哪一个ECMAScript版本的语法。也可以设置基于年份的JS标准，比如2015(ECMA 6)
sourceType: 如果你的代码是ECMAScript 模块写的，该字段配置为module，否则为script(默认值)
ecmaFeatures：该对象指示你想使用的额外的语言特性
globalReturn：允许全局范围内的return语句 impliedStrict：使能全局strict模式 jsx：使能JSX
rules: 自定义规则，可以覆盖掉extends的配置。(在个性化配置一般可以在这里配置)

js 复制代码

// .eslintrc.js example
module.exports = {
  "env": {
      "browser": true,
      "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
  },
   rules: { // 覆盖继承的规则
      "no-unused-vars": "error",
      "no-undef": "error"
  }
}

然后打开webstorm 的设置找到对应的配置：（让webstorm 默认使用node_modules 中的文件去格式化代码）

prettier

插件市场安装插件：

prettier 常用的规则： .prettierrc.js

js 复制代码

//
// 配置几个常用的就可以
module.exports = {
    // 一行最多多少个字符
    "printWidth": 150,
    // 指定每个缩进级别的空格数
    "tabWidth": 2,
    // 使用制表符而不是空格缩进行
    "useTabs": true,
    // 在语句末尾打印分号
    "semi": true,
    // 使用单引号而不是双引号
    "singleQuote": true,
    // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
    "quoteProps": 'as-needed',
    // 在JSX中使用单引号而不是双引号
    "jsxSingleQuote": false,
    // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
    "trailingComma": 'es5',
    // 在对象文字中的括号之间打印空格
    "bracketSpacing": true,
    // jsx 标签的反尖括号需要换行
    "jsxBracketSameLine": false,
    // 在jsx中把'>' 是否单独放一行
    "bracketSameLine": false,
    // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
    "arrowParens": 'always',
    // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
    "rangeStart": 0,
    "rangeEnd": Infinity,
    // 指定要使用的解析器，不需要写文件开头的 @prettier
    "requirePragma": false,
    // 不需要自动在文件开头插入 @prettier
    "insertPragma": false,
    // 使用默认的折行标准 always\never\preserve
    "proseWrap": 'preserve',
    // 指定HTML文件的全局空格敏感度 css\strict\ignore
    "htmlWhitespaceSensitivity": 'css',
    // Vue文件脚本和样式标签缩进
    "vueIndentScriptAndStyle": false,
    // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
    "endOfLine": 'lf'
};

设置中配置使用prettier使用 node_modules 中的包。

到此webstorm 继承prettier 和eslint 就可以了。

为什么放弃使用webstorm？

如果项目的规模比较小，其实webstorm 还是比较好用的，但是当项目到一定规模以后，wenbstorm 会变得极其卡顿，一度让我怀疑是我电脑的性能不行了。网上看到很多教程说排除node_modules ,增加内存，详细看这篇文档（webstorm卡顿解决办法）但是并没有得到有效的缓解，这给带来了很不好的体验，增加了很多心智负担。网上看很多人都在使用vscode,于是我决定转战vscode。

vscode

vscode 非常轻量，不像webstorm 那样开箱即用，但是好在有很多插件可以使用，让vscode变得非常受欢迎。

vscode 常用的插件：

Auto Close Tag (webstorm 默认支持，不需要自己安装插件，哈哈)
Auto Rename Tag (webstorm 默认也支持)
eslint (非常重要)
prettier（非常重要）
live Server （可以在浏览器中访问当前项目的资源，webstorm 默认也支持）
vue 和 React 框架相关的插件
REST Client （对于学习网络协议相关的知识很有帮助）
GitHub Copilot (gitup 官方的AI代码提示工具，很好用)
Chinese (Simplified) (简体中文汉化插件)
。。。。

vscode 常用的快捷键

ctrl + p 按照名称搜索文件 (很常用，尤其大型项目)
alt + <- 返回光标上一次的位置（可以跨文件，非常好用）
alt + -> 返回光标下一次的位置（和上面一个一样，类似浏览器的前进后退，底层肯定使用的是栈实现的）
ctrl + enter 另起一行（webstorm 中是shift + enter）
shift + alt + down 复制当前行到下一行 (webstorm 中的 ctrl + d)
ctrl + c (复制当前行或选中部分，类似webstorm)
ctrl + v (粘贴)
ctrl + x (剪切当前行，可以用来删除)
End 跳到行尾
Home 跳到行首
ctrl+/ 用 // 注释当前行或选中行 //const a = 111
shift + alt + a 用 /* */ 注释选中部分
Ctrl + H 替换
ctrl + F 查找

总结：两个编译器都很优秀，平时我也是混用，有时候用VScode,有时候用webstorm。二者各有优点，大型项目一般我使用vscode(性能好，兼容团队，心智负担低)，但是平时练习一些demo, 验证一些想法，我使用webstorm 多一点。

一、用过idea、webstorm、vscode用哪个编译器 。

前言