记录我所使用的VScode插件

已注销
311 阅读2分钟

推荐安装的Vscode插件

1. EditorConfig 

EditorConfig插件，读取.editorconfig文件，提供最基础的代码编辑配置，控制代码缩进，行尾符

此插件可以读取 .editorconfig 文件，在修改配置之后，使用

shift + alt + f

可以对已存在的代码也进行统一的格式化处理

2. ESlint

ESlint插件，读取ESlint.js配置，提供ESlint报错的实时提示

我们能够在项目初始化时就加入ESLint规则，

如果是已有项目可以通过下方处理来进行配置

eslint安装有两种方式

  1. 使用全局安装 npm install -g eslint
  2. 项目文件内安装 npm install --save-dev eslint

eslint使用方式，不配置package.json

  1. 初始化eslintrc.js文件，全局直接在项目目录内使用eslint --init
  2. 项目内安装git 内使用./node_modules/.bin/eslint --init；cmd内使用 .\node_modules.bin\eslint --init
  3. 配置eslintrc.js文件，这里我们使用standard配置文件，然后在上面做些许修改
  4. eslint进行代码检查，git上使用./node_modules/.bin/eslint 需要被检查的.js文件

eslint使用方式，进行package.json设置

  1. 在scripts对象内配置lint命令"lint": "eslint --ext .js,.vue src"
  2. 运行npm run lint即可对src目录下所有.js与.vue后缀的文件进行检查

eslint修复错误代码

  1. 运行代码./node_modules/.bin/eslint --fix src or ./node_modules/.bin/eslint --fix src/utils/index.js
  2. 在scripts内配置命令"fix": "eslint --fix src" or "fix": "eslint --ext .js,.vue --fix src" or "fix": "eslint --fix src/utils/index.js"

链接 — github.com/willson-wan… 

3. Prrettier - Code formatter

有多种增加prettier的方法，我目前使用的是直接在项目的根目录下增加prettierrc.js文件

这个插件会自动读取这个文件，对代码格式进行自动化处理

我在实际使用的时候发现在格式化vue文件失败

于是在vscode的设置下对Vetur插件的配置进行了修改，都改为prettier了

（了解到prettierrc文件比vscode的settings的权级更高，然而实际开发中不是每个人的vscode设置都一样，所以这不算是一个好办法，但是并没有找到更好的办法）

4. stylelint

提供css/scss代码lint的实时提醒，fix等;

5. Code Spell Checker

检测你的英文单词拼写有没有问题，（驼峰中划线下划线都能检测）

英文不好写错字比较丑嘛

推荐的配置

 1、Eslint 检测 typescript代码

"eslint.validate": [
    "javascript",
    "typescript"
],

2、设置文件保存时格式化代码，prettier默认在git commit代码时进行格式化，如果想在代码保存时就格式化 ——

"editor.formatOnSave": true


avatar
文章
阅读
粉丝