返回

用户指南：vscode格式化代码（eslint csscomb minapp）

前端

csscomb-banner


eslint-icon csscomb-icon minapp-icon

格式化你的代码

在开始进行任何的开发和调试之前，做好代码的格式化是很关键的，虽然并不是所有编辑器都可以提供自动的代码格式化服务，但这里有一些很优秀的编辑器可以做到，例如Visual Studio Code，这个编辑器内置了许多的格式化引擎，这其中就包括ESLint、CSSComb、MinApp，这些引擎会根据你自己的编码的标准来修正代码，而且这些编辑器都支持Windows、macOS和Linux。

步骤1：安装插件

需要在你的Visual Studio Code中安装Lint插件，我们以ESLint为例子：

  • 打开文件并选择“首选项”，然后单击“设置”。
  • 在settings.json中，加入
"javascript.validation.lint.provider": "eslint"

现在需要安装软件包，来安装ESLint的格式化引擎，

  • 在settings.json中，添加
"eslint.package.json.path": "C:\\.npm\\package.json"
  • 在settings.json中，添加
"editor.codeActionsOnEnter": true
  • 在setting.json中，添加
"editor.formatOnPaste": true
  • 在setting.json中，添加
"eslint.experimental.alwaysShow COSTACodesActions": true
  • 在设置中安装：
"eslint.integratedLinter": true
  • 在setting.json中，添加
"eslint.lint.fixAll": true
  • 在setting.json中，添加
"eslint.default.config": "/Users/webknus/.vscode/settings.json"
  • 在setting.json中，添加
"eslint.debugServer.port": 9512
  • 在setting.json中，添加
"eslint.linterOptions.enable.react-native": true
  • 在setting.json中，添加
"eslint.format.provider": "vscode.Eslint"

CSSComb的安装与设置步骤如下：

  • 打开settings.json，找到：
"csscomb.config": {
    "spaceHack": false,
    "bannerComment": "/* csscomb rules */, /* csscomb-preview */"
  },

把config增加或修改为：

"csscomb.config": {
    "spaceHack": true,
    "bannerComment": "/* csscomb rules */, /* csscomb-preview */, /*csscomb.ignore*/"
  },

MinApp的安装与设置步骤如下：

  • 在setting.json中，添加
"minapp.useGlobalVSCodeSettings": true
  • 在setting.json中，添加
"minapp.ruleCategory": ["error","warning","info"],
  • 在setting.json中，添加
"minapp.lint.useLabelFix": true
  • 在setting.json中，添加
"minapp.showlintinStatusBar": true
  • 在setting.json中，添加
"minapp.popupInfo": true

步骤2：项目中添加eslint依赖

  • 在终端中，通过命令添加ESLint依赖
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin
  • 在终端中，添加ESLint
npx eslint --init
  • 添加ESLint到.tsconfig.json文件中
"eslint.options":{
    "extraConfigFile":"./eslintrc.json",
    "allowTemplateLiterl":true
  },

CSSComb依赖
在你的项目中添加

npm install -g csscomb

MinApp依赖
在你的项目中添加

npm install minapp
  • 现在设置好就绪，开始你的代码格式化之旅吧！

csscomb-banner