HTMLHint、CSSLint、ESLint

HTMLHint、CSSLint、ESLint

 

ESLint

    灵活，任何规则都可以开启闭合，以及有些规则有些额外配置

    很容易拓展和有需要可用插件

    容易理解产出

    包含了在其他检查器中不可用的规则，使得ESLint在错误检查上更有用

    支持ES6，唯一支持JSX的工具

    支持自定义报告

 

 

一、安装 VisualStudio Code

 

二、安装插件，点击扩展

安装ESLint   用于JS代码的静态检查

安装HTMLHint 用于HTML代码的静态检查

安装CSSLint用于CSS代码的静态检查

安装Vetur   用于IDE支持.vue格式的文本

 

三、配置文档

3.1  将.htmlhintrc、.eslintrc.json、.csslintrc文件放在需要测试的根目录，此时打开对应的文件，hemlhint和csslint就可以使用了

3.2  eslintrc的特殊设置

3.2.1  公司内网现在，需给Visual Studio Code设置代理

文件-->首选项-->设置

-------------------------------------------------------------------------------

// 将设置放入此文件中以覆盖默认设置

{

// HTTP 配置

// 要使用的代理设置。如果尚未设置，则将从 http_proxy 和 https_proxy 环境变量获取

"http.proxy":"这里填写你的代理地址",

// 是否应根据提供的 CA 列表验证代理服务器证书。

"http.proxyStrictSSL": true,

"window.zoomLevel": 1,

"files.autoSave":"off",

"files.associations": {

"*.vue": "vue"

},

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

"vue"

],

"eslint.options":{

"plugins": ["html"]

},

//"eslint.options": {"configFile":"C:/mydirectory/.eslintrc.json" },

//"eslint.workingDirectories":["./client", "./server"]

"git.ignoreLegacyWarning": true

}

-----------------------------------------------------------------------------------------

设置代理，支持内网，设置eslint支持的文件类型

 

node安装：

workspace install  :   npm install eslint

global install : npm install -g eslint

 

生成配置文件  .eslintrc :

Create '.eslintrc.json' file

如果是全局安装：eslint--init

局部安装：.\node_modules\.bin\eslint--init