前端格式化工具与检测工具选择与使用

//工具安装前的准备与相关简单用到的命令
node -v
npm -v


npm init 初始化一个空项目是一个好的习惯,生成一个package.json


npm i 是 npm install 的简写，建议使用 npm i


npm i express --save/npm i express -S (安装 express，同时将 "express": "^4.14.0" 写入 dependencies )

npm i express --save-dev/npm i express -D (安装 express，同时将 "express": "^4.14.0" 写入 devDependencies )


npm start 等价于 npm run start
npm test 等价于 npm run test


NODE_ENV=test node app
通过以上命令启动程序，指定当前环境变量 NODE_ENV 的值为 test，那么在 app.js 中可通过 process.env 来获取环境变量:
console.log(process.env.NODE_ENV) //test



//前端格式化工具与检测工具选择与使用

HTML:选择htmlHint进行检测，选择prettier进行格式化
CSS：选择stylelint进行检测，stylelint-order进行CSS属性排序插件排序,选择prettier进行格式化
JS:选择ESLint进行检测，选择prettier进行格式化


想检测Html中的JavaScript,加入
npm i eslint-plugin-html -D



prettier安装使用：
https://www.cnblogs.com/guwufeiyang/p/12886333.html

工具建议全局安装
全局安装
npm install --global prettier

局部安装
npm install --save-dev --save-exact prettier

yarn add prettier --dev --exact

运行配置文件，建议使用js格式(JSON,JS,YAML)
.prettierrc.js （例子）

module.exports = {
printWidth: 120, //编辑器每行的长度，默认80;
semi: true, //是否使用分号，默认true，使用分号;
singleQuote: true, //是否使用单引号，默认为false，不适用单引号，使用双引号;
bracketSpacing: true, //对象括号中的空格，默认true;
tabWidth: 4, //制表符tab的宽度，默认值是2;
useTabs: true, //代码缩进是否用制表符tab，默认false;
TrailingCooma: 'all', //末尾逗号,none 末尾没有逗号,es5 es5有效的地方保留,all 在可能的地方都加上逗号;
jsxBracketSameLine: false, //jsx标签闭合位置 默认false,
};

更多自定义配置:https://prettier.io/docs/en/options.html?spm=a2c4e.11153940.blogcont422690.11.5d0b5721zz3ckz

执行格式化
prettier --config 配置位置 --write 需要格式化的文件
基础用法
prettier --config ./.prettierrc --write ./index.js
扩展用法（自定义文件配置以及格式化vue文件）
prettier --config ./pre.js --write ./index.vue

webstrom可以在file watcher中进行prettier的监听，做到保存时就进行格式化




htmlhint安装使用:
https://www.cnblogs.com/imwtr/p/9189414.html

npm i -g htmlhint

webstrom安装htmlhint插件;

因此插件比较特殊，在windows下，bin中请使用 node执行程序的绝对路径 全局 htmlhint的绝对路径
bin:  D:\Program Files\nodejs\node.exe C:\Users\e470\AppData\Roaming\npm\node_modules\htmlhint\bin\htmlhint
path: .htmlhintrc


.htmlhintrc（只支持JSON方式进行配置）
{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "attr-value-not-empty": false,
  "attr-no-duplication": false,
  "doctype-first": true,
  "tag-pair": true,
  "tag-self-close": true,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "title-require": true,
  "alt-require": true,
  "doctype-html5": true,
  "id-class-value": "hump",
  "style-disabled": false,
  "inline-style-disabled": false,
  "inline-script-disabled": false,
  "space-tab-mixed-disabled": "tab",
  "id-class-ad-disabled": true,
  "href-abs-or-rel": false,
  
  
}

对应说明：
标签名必须小写
属性名必须小写
属性值必须放在双引号中
属性值一定不可为空
属性值一定不可重复
Doctype必须是 HTML 文档的第一行
标签必须成对
标签必须自封闭
特殊字符必须
ID 属性必须唯一
src 属性一定不可为空
title 属性必须出现在标签中
img 标签必须包含 alt 属性
Doctype 必须是 HTML5
ID 和 Class 的命名规则必须统一
不该使用样式标签
不该使用行内样式
不该使用行内脚本
空格和制表符一定不可混合在行前
ID 和 Class 一定不可使用广告关键词
href 必须是绝对路径或者相对路径
属性值一定不可使用不安全字符
script 标签不该使用在头部
————————————————
https://blog.csdn.net/weixin_40073115/article/details/103819884

更详细说明:
https://blog.csdn.net/LuckXinXin/article/details/105421681

简单使用：
htmlhint testt/tdTest.html




stylelint安装使用:
一个强大的、现代化的 CSS 检测工具
https://www.cnblogs.com/jiaoshou/p/11284204.html
https://blog.csdn.net/maimiho/article/details/110226793

安装：
npm i stylelint stylelint-config-standard stylelint-config-prettier stylelint-order  -D

yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-order --dev


其中，stylelint是运行工具，stylelint-config-standard是stylelint的推荐配置，
stylelint-order是CSS属性排序插件(先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)。

① stylelint
② stylelint-config-standard：一些常见的css书写规范
③ stylelint-config-prettier：关闭所有不必要的或者有可能与Prettier冲突的规则
④ stylelint-order：提供给css属性排序的功能
⑤ stylelint-config-rational-order：一套常见的css书写顺序
⑥ prettier: 格式化


webstrom中配置stylelint运行环境
https://www.cnblogs.com/imwtr/p/9189414.html

stylelint --fix  用于运行stylelint-order排序
stylelint --fix testt/tdTest.html   //不能用“\”

.stylelintrc.js(配置文件)
module.exports = {
extends: [
"stylelint-config-standard",
"stylelint-config-recess-order",
"stylelint-config-prettier",
],
plugins: ["stylelint-scss", "stylelint-order"],
rules: {
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"extend",
"at-root",
"debug",
"warn",
"error",
"if",
"else",
"for",
"each",
"while",
"mixin",
"include",
"content",
"return",
"function",
],
},
],ignoreatrulesignoreatrulesignoreatrulesignoreatrulesignoreatrulesignoreAtRules
},
};


webStrom可以在file Watcher中进行prettier的监听，做到保存时就进行格式化(感觉会要多种文件类型要监听，不太好用，还是手动触发好点)
stylelint --fix testt/tdTest.html   //不能用“\”
配置参数
D:\webTest\eslitTest\node_modules\.bin\stylelint.cmd
$/FileRelativePath$ --fix
$/FileRelativePath$


配置stylelint-order的快捷方式：
webStrom中在tool中加入这个外部工具，方便你在保存时就进行一次排序

快捷方式配置参数
D:\webTest\eslitTest\node_modules\.bin\stylelint.cmd
$FileName$ --fix
$FileDir$


webStrom中在file watcher 中加入这个外部工具，方便你在保存时就进行一次排序








ESLint安装使用：
https://www.cnblogs.com/lsgxeva/p/7994474.html

安装
npm i -g eslint babel-eslint eslint-config-alloy eslint-plugin-html

npm install eslint --save-dev


yarn add eslint babel-eslint eslint-config-alloy eslint-plugin-html --dev

eslint --init  //设置完成后我们会得到一份文件名为 .eslintrc.js 的配置文件

.eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
},
env: {
browser: true,
//; node: true,;
es6: true,;
jquery: true,
},
plugins: ['html'],
// extends: 'standard',
extends: ['eslint:recommended'],
rules: {
'vue/max-attributes-per-line': [
0,
{
singleline: 10,;singleline;singleline;singleline;singleline;singleline;singleline
multiline: {;;;;;;
max: 1,;;;;;;
allowFirstLine: true,
},
},
];,
'vue/singleline-html-element-content-newline': 'off';,
'vue/multiline-html-element-content-newline': 'off';,
'vue/name-property-casing': [0, 'PascalCase'];,
'vue/no-v-html': 'off';,
'accessor-pairs': 2,
'arrow-spacing': [
2,
{
before: true,
after: true,
},
],
'block-spacing': [2, 'always'],
'brace-style': [
2,
'1tbs',
{
allowsingleline: true,
},
],
camelcase: [
2,
{
properties: 'always',
},
],
'comma-dangle': [0, 'never'], //对象字面量项尾不能有逗号
'comma-spacing': [
2,
{
before: false,
after: true,
},
],
'comma-style': [2, 'last'],
'constructor-super': 2,
curly: [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
eqeqeq: ['error', 'always'],
'generator-star-spacing': [
2,
{
before: true,
after: true,
},
],
'handle-callback-err': [2, '^(err|error)$'],
indent: [
2,
'tab',
{
switchcase: 1,
},
],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [
2,
{
beforecolon: false,
aftercolon: true,
},
],
'keyword-spacing': [
2,
{
before: true,
after: true,
},
],
'new-cap': [
2,
{
newiscap: true,
capisnew: false,
},
],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-constant-condition': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [
2,
{
allowloop: false,
allowswitch: false,
},
],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [
2,
{
max: 10,
},
],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 0,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [
2,
{
defaultassignment: false,
},
],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [
1,
{
vars: 'local',
args: 'none',
},
],
'no-useless-call': 0,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [
2,
{
initialized: 'never',
},
],
'operator-linebreak': [
2,
'after',
{
overrides: {
'?': 'before',
':': 'before',
},
},
],
'padded-blocks': [2, 'never'],
quotes: [
2,
'single',
{
avoidescape: true,
allowtemplateliterals: true,
},
],
// 'quotes': [2, 'double', {
// // 'avoidEscape': true,
// // 'allowTemplateLiterals': true
// // }],
semi: [2, 'always'],
'semi-spacing': [
2,
{
before: false,
after: true,
},
],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [0, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [
2,
{
words: true,
nonwords: false,
},
],
'spaced-comment': [
0,
'always',
{
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','],
},
],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
yoda: [2, 'never'],
'prefer-const': 2,
'array-bracket-spacing': [2, 'never'
},
};


eslint配置环境（上面内容分析）
"env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jquery"
}
env 属性来指定要启用的环境，将其设置为 true，以保证在进行代码检测时不会把这些环境预定义的全局变量识别成未定义的变量而报错：


设置语言选项
默认情况下，eslint 支持 ecmascript 5 语法，如果你想启用对 ecmascript 其它版本和 jsx 等的支持，eslint 允许你使用 parseroptions 属性进行指定想要支持的 javascript 语言选项，不过你可能需要自行安装 eslint-plugin-react 等插件。
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
}


配置规则
在上文的配置文件中， "extends": "eslint:recommended" 选项表示启用推荐规则，在推荐规则的基础上我们还可以根据需要使用 rules 新增自定义规则，每个规则的第一个值都是代表该规则检测后显示的错误级别：

"off" 或 0 - 关闭规则
"warn" 或 1 - 将规则视为一个警告
"error" 或 2 - 将规则视为一个错误


rules: {
    "规则名": [规则值, 规则配置]
}



你可以在任何文件或目录上运行eslint如下命令进行检测规则
eslint yourfile.js



想检测html中的javascript
npm i eslint-plugin-html -d


webstrom可以在file watcher中进行prettier的监听，做到保存时就进行格式化
$ProjectFileDir$\node_modules\.bin\prettier
--write $FilePathRelativeToProjectRoot$



eslint配置
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
},
env: {
browser: true,
// node: true,
es6: true,
jquery: true,
},
plugins: ['html'],
// extends: 'standard',
extends: ['eslint:recommended'],
rules: {
'vue/max-attributes-per-line': [
0,
{
singleline: 10,
multiline: {
max: 1,
allowFirstLine: true,
},
},
],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/name-property-casing': [0, 'PascalCase'],
'vue/no-v-html': 'off',
'accessor-pairs': 2,
'arrow-spacing': [
2,
{
before: true,
after: true,
},
],
'block-spacing': [2, 'always'],
'brace-style': [
2,
'1tbs',
{
allowSingleLine: true,
},
],
camelcase: [
2,
{
properties: 'always',
},
],
'comma-dangle': [0, 'never'], //对象字面量项尾不能有逗号
'comma-spacing': [
2,
{
before: false,
after: true,
},
],
'comma-style': [2, 'last'],
'constructor-super': 2,
curly: [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
eqeqeq: ['error', 'always'],
'generator-star-spacing': [
2,
{
before: true,
after: true,
},
],
'handle-callback-err': [2, '^(err|error)$'],
indent: [
2,
'tab',
{
SwitchCase: 1,
},
],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [
2,
{
beforeColon: false,
afterColon: true,
},
],
'keyword-spacing': [
2,
{
before: true,
after: true,
},
],
'new-cap': [
2,
{
newIsCap: true,
capIsNew: false,
},
],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-constant-condition': 1,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 1,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [
2,
{
allowLoop: false,
allowSwitch: false,
},
],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [
2,
{
max: 10,
},
],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 0,
'no-trailing-spaces': 2,
'no-undef': 0,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [
2,
{
defaultAssignment: false,
},
],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [
1,
{
vars: 'local',
args: 'none',
},
],
'no-useless-call': 0,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [
2,
{
initialized: 'never',
},
],
'operator-linebreak': [
2,
'after',
{
overrides: {
'?': 'before',
':': 'before',
},
},
],
'padded-blocks': [2, 'never'],
quotes: [
2,
'single',
{
avoidEscape: true,
allowTemplateLiterals: true,
},
],
// 'quotes': [2, 'double', {
// // 'avoidEscape': true,
// // 'allowTemplateLiterals': true
// // }],
semi: [2, 'always'],
'semi-spacing': [
2,
{
before: false,
after: true,
},
],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [0, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [
2,
{
words: true,
nonwords: false,
},
],
'spaced-comment': [
0,
'always',
{
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','],
},
],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
yoda: [2, 'never'],
'prefer-const': 2,
'array-bracket-spacing': [2, 'never'],
},
};